d190939819c78a310eda3b3da5906b8fd530a953
[autoinstalls/wordpress.git] / wp-includes / css / media-views-rtl.css
1 /**
2  * Base Styles
3  */
4 .media-modal * {
5         -webkit-box-sizing: content-box;
6         -moz-box-sizing: content-box;
7         box-sizing: content-box;
8 }
9
10 .media-modal,
11 .media-frame {
12         font-family: "Open Sans", sans-serif;
13         font-size: 12px;
14 }
15
16 .media-frame input,
17 .media-frame textarea {
18         padding: 6px 8px;
19 }
20
21 .media-frame select,
22 .wp-admin .media-frame select {
23         line-height: 28px;
24         margin-top: 3px;
25 }
26
27 .media-frame a {
28         border-bottom: none;
29         color: #21759b;
30 }
31
32 .media-frame a:hover {
33         color: #d54e21;
34 }
35
36 .media-frame a.button {
37         color: #333;
38 }
39
40 .media-frame a.button:hover {
41         color: #222;
42 }
43
44 .media-frame a.button-primary,
45 .media-frame a.button-primary:hover {
46         color: #fff;
47 }
48
49 .media-frame input[type="text"],
50 .media-frame input[type="password"],
51 .media-frame input[type="number"],
52 .media-frame input[type="search"],
53 .media-frame input[type="email"],
54 .media-frame input[type="url"],
55 .media-frame textarea,
56 .media-frame select {
57         font-family: "Open Sans", sans-serif;
58         font-size: 12px;
59         -webkit-box-sizing: border-box;
60         -moz-box-sizing: border-box;
61         box-sizing: border-box;
62         border-width: 1px;
63         border-style: solid;
64         border-color: #dfdfdf;
65 }
66
67 .media-frame input[type="text"]:focus,
68 .media-frame input[type="password"]:focus,
69 .media-frame input[type="number"]:focus,
70 .media-frame input[type="search"]:focus,
71 .media-frame input[type="email"]:focus,
72 .media-frame input[type="url"]:focus,
73 .media-frame textarea:focus,
74 .media-frame select:focus {
75         border-color: #5b9dd9;
76 }
77
78 .media-frame select {
79         height: 24px;
80         padding: 2px;
81 }
82
83 .media-frame input:disabled,
84 .media-frame textarea:disabled,
85 .media-frame input[readonly],
86 .media-frame textarea[readonly] {
87         background-color: #eee;
88 }
89
90 .media-frame input[type="search"] {
91         -webkit-appearance: textfield;
92 }
93
94 .media-frame :-moz-placeholder {
95    color: #a9a9a9;
96 }
97
98 .media-frame .hidden {
99         display: none;
100 }
101
102 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
103 .ui-sortable,
104 .ui-draggable {
105         -ms-touch-action: none;
106         touch-action: none;
107 }
108
109 .meta-box-sortables.ui-sortable {
110         -ms-touch-action: auto;
111         touch-action: auto;
112 }
113
114 .meta-box-sortables.ui-sortable .hndle {
115         -ms-touch-action: none;
116         touch-action: none;
117 }
118
119 /**
120  * Modal
121  */
122 .media-modal {
123         position: fixed;
124         top: 30px;
125         right: 30px;
126         left: 30px;
127         bottom: 30px;
128         z-index: 160000;
129 }
130
131 .wp-customizer .media-modal {
132         z-index: 560000;
133 }
134
135 .media-modal-backdrop {
136         position: fixed;
137         top: 0;
138         right: 0;
139         left: 0;
140         bottom: 0;
141         min-height: 360px;
142         background: #000;
143         opacity: 0.7;
144         z-index: 159900;
145 }
146
147 .wp-customizer .media-modal-backdrop {
148         z-index: 559900;
149 }
150
151 .media-modal-close {
152         position: absolute;
153         text-decoration: none;
154         top: 10px;
155         left: 10px;
156         width: 30px;
157         height: 30px;
158         z-index: 1000;
159         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
160         transition: color .1s ease-in-out, background .1s ease-in-out;
161 }
162
163 .media-modal-close:active {
164         -webkit-box-shadow: none;
165         box-shadow: none;
166 }
167
168 .media-modal-close span.media-modal-icon {
169         display: block;
170         margin-top: 5px;
171         width: 30px;
172         height: 15px;
173         background-image: none;
174         text-align: center;
175 }
176
177 .media-modal-close .media-modal-icon:before {
178         content: '\f158';
179         font: normal 20px/1 'dashicons';
180         speak: none;
181         vertical-align: middle;
182         -webkit-font-smoothing: antialiased;
183         -moz-osx-font-smoothing: grayscale;
184         color: #666;
185 }
186
187 .media-modal-close:hover .media-modal-icon:before {
188         color: #2ea2cc;
189 }
190
191 .media-modal-close:active {
192         outline: 0;
193 }
194
195 .media-modal-content {
196         position: absolute;
197         top: 0;
198         right: 0;
199         left: 0;
200         bottom: 0;
201         overflow: auto;
202         min-height: 300px;
203         -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
204         box-shadow: 0 5px 15px rgba(0,0,0,0.7);
205         background: #fcfcfc;
206         -webkit-font-smoothing: subpixel-antialiased;
207 }
208
209 .media-modal-icon {
210         background-image: url(../images/uploader-icons.png);
211         background-repeat: no-repeat;
212 }
213
214 /**
215  * Toolbar
216  */
217 .media-toolbar {
218         position: absolute;
219         top: 0;
220         right: 0;
221         left: 0;
222         z-index: 100;
223         height: 60px;
224         padding: 0 16px;
225         border: 0 solid #dfdfdf;
226         overflow: hidden;
227 }
228
229 .media-toolbar-primary {
230         float: left;
231         height: 100%;
232 }
233
234 .media-toolbar-secondary {
235         float: right;
236         height: 100%;
237 }
238
239 .media-toolbar-primary > .media-button,
240 .media-toolbar-primary > .media-button-group {
241         margin-right: 10px;
242         float: right;
243         margin-top: 15px;
244 }
245
246 .media-toolbar-secondary > .media-button,
247 .media-toolbar-secondary > .media-button-group {
248         margin-left: 10px;
249         margin-top: 15px;
250 }
251
252 /**
253  * Sidebar
254  */
255 .media-sidebar {
256         position: absolute;
257         top: 0;
258         left: 0;
259         bottom: 0;
260         width: 267px;
261         padding: 0 16px 24px;
262         z-index: 75;
263         background: #f3f3f3;
264         border-right: 1px solid #ddd;
265         overflow: auto;
266         -webkit-overflow-scrolling: touch;
267 }
268
269 .hide-toolbar .media-sidebar {
270         bottom: 0;
271 }
272
273 .media-sidebar .sidebar-title {
274         font-size: 20px;
275         margin: 0;
276         padding: 12px 10px 10px;
277         line-height: 28px;
278 }
279
280 .media-sidebar .sidebar-content {
281         padding: 0 10px;
282         margin-bottom: 130px;
283 }
284
285 .media-sidebar .search {
286         display: block;
287         width: 100%;
288 }
289
290 .media-sidebar h3,
291 .image-details h3 {
292         position: relative;
293         font-weight: bold;
294         text-transform: uppercase;
295         font-size: 12px;
296         color: #666;
297         margin: 24px 0 8px;
298 }
299
300 .media-sidebar .setting,
301 .attachment-details .setting {
302         display: block;
303         float: right;
304         width: 100%;
305         margin: 1px 0;
306 }
307
308 .media-sidebar .setting label,
309 .attachment-details .setting label {
310         display: block;
311 }
312
313 .media-sidebar .setting .link-to-custom,
314 .attachment-details .setting .link-to-custom {
315         margin: 3px 2px 0;
316 }
317
318 .media-sidebar .setting span,
319 .attachment-details .setting span {
320         min-width: 30%;
321         margin-left: 4%;
322         font-size: 12px;
323         text-align: left;
324 }
325
326 .media-sidebar .setting select,
327 .attachment-details .setting select {
328         max-width: 65%;
329 }
330
331 .media-sidebar .setting input[type="checkbox"],
332 .media-sidebar .field input[type="checkbox"],
333 .media-sidebar .setting input[type="radio"],
334 .media-sidebar .field input[type="radio"],
335 .attachment-details .setting input[type="checkbox"],
336 .attachment-details .field input[type="checkbox"],
337 .attachment-details .setting input[type="radio"],
338 .attachment-details .field input[type="radio"] {
339         float: none;
340         margin: 8px 3px 0;
341         padding: 0;
342 }
343
344 .media-sidebar .setting span,
345 .attachment-details .setting span,
346 .compat-item label span {
347         float: right;
348         min-height: 22px;
349         padding-top: 8px;
350         line-height: 16px;
351         font-weight: normal;
352         color: #666;
353 }
354
355 .compat-item label span  {
356         text-align: left;
357 }
358
359 .media-sidebar .setting input[type="text"],
360 .media-sidebar .setting input[type="password"],
361 .media-sidebar .setting input[type="email"],
362 .media-sidebar .setting input[type="number"],
363 .media-sidebar .setting input[type="search"],
364 .media-sidebar .setting input[type="tel"],
365 .media-sidebar .setting input[type="url"],
366 .media-sidebar .setting textarea,
367 .media-sidebar .setting .value,
368 .attachment-details .setting input[type="text"],
369 .attachment-details .setting input[type="password"],
370 .attachment-details .setting input[type="email"],
371 .attachment-details .setting input[type="number"],
372 .attachment-details .setting input[type="search"],
373 .attachment-details .setting input[type="tel"],
374 .attachment-details .setting input[type="url"],
375 .attachment-details .setting textarea,
376 .attachment-details .setting .value {
377         -webkit-box-sizing: border-box;
378         -moz-box-sizing: border-box;
379         box-sizing: border-box;
380         margin: 1px;
381         width: 65%;
382         float: left;
383 }
384
385 .media-sidebar .setting .value,
386 .attachment-details .setting .value {
387         margin: 0 1px;
388         text-align: right;
389 }
390
391 .media-sidebar .setting textarea,
392 .attachment-details .setting textarea,
393 .compat-item .field textarea {
394         height: 62px;
395         resize: vertical;
396 }
397
398 .media-sidebar select,
399 .attachment-details select {
400         margin-top: 3px;
401 }
402
403 .compat-item {
404         float: right;
405         width: 100%;
406         overflow: hidden;
407 }
408
409 .compat-item table {
410         width: 100%;
411         table-layout: fixed;
412         border-spacing: 0;
413         border: 0;
414 }
415
416 .compat-item tr {
417         padding: 2px 0;
418         display: block;
419         overflow: hidden;
420 }
421
422 .compat-item .label,
423 .compat-item .field {
424         display: block;
425         margin: 0;
426         padding: 0;
427 }
428
429 .compat-item .label {
430         min-width: 30%;
431         margin-left: 4%;
432         float: right;
433         text-align: left;
434 }
435
436 .compat-item .label span {
437         display: block;
438         width: 100%;
439 }
440
441 .compat-item .field {
442         float: left;
443         width: 66%;
444 }
445
446 .compat-item .field input[type="text"],
447 .compat-item .field input[type="password"],
448 .compat-item .field input[type="email"],
449 .compat-item .field input[type="number"],
450 .compat-item .field input[type="search"],
451 .compat-item .field input[type="tel"],
452 .compat-item .field input[type="url"] {
453         width: 100%;
454         margin: 0;
455 }
456
457 .sidebar-for-errors .attachment-details,
458 .sidebar-for-errors .compat-item,
459 .sidebar-for-errors .media-sidebar .media-progress-bar,
460 .sidebar-for-errors .upload-details {
461         display: none !important;
462 }
463
464 /**
465  * Menu
466  */
467 .media-menu {
468         position: absolute;
469         top: 0;
470         right: 0;
471         left: 0;
472         bottom: 0;
473         margin: 0;
474         padding: 10px 0;
475         background: #f3f3f3;
476         border-left-width: 1px;
477         border-left-style: solid;
478         border-left-color: #ccc;
479         -webkit-user-select: none;
480         -moz-user-select: none;
481         -ms-user-select: none;
482         user-select: none;
483 }
484
485 .media-menu > a {
486         display: block;
487         position: relative;
488         padding: 8px 20px;
489         margin: 0;
490         line-height: 18px;
491         font-size: 14px;
492         color: #0074a2;
493         text-decoration: none;
494 }
495
496 .media-menu > a:hover {
497         color: #21759B;
498         background: rgba( 0, 0, 0, 0.04 );
499 }
500
501 .media-menu > a:active {
502         outline: none;
503 }
504
505 .media-menu .active,
506 .media-menu .active:hover {
507         color: #222;
508         font-weight: bold;
509 }
510
511 .media-menu .separator {
512         height: 0;
513         margin: 12px 20px;
514         padding: 0;
515         border-top: 1px solid #ddd;
516 }
517
518 /**
519  * Menu
520  */
521 .media-router {
522         position: relative;
523         padding: 0 6px;
524         margin: 0;
525         clear: both;
526         -webkit-user-select: none;
527         -moz-user-select: none;
528         -ms-user-select: none;
529         user-select: none;
530 }
531
532 .media-router a {
533         -webkit-transition: none;
534         transition: none;
535 }
536
537 .media-router > a {
538         position: relative;
539         float: right;
540         padding: 8px 10px 9px;
541         margin: 0;
542         height: 18px;
543         line-height: 18px;
544         font-size: 14px;
545         text-decoration: none;
546 }
547
548 .media-router > a:last-child {
549         border-left: 0;
550 }
551
552 .media-router > a:active {
553         outline: none;
554 }
555
556 .media-router .active,
557 .media-router .active:hover {
558         color: #333;
559 }
560
561 .media-router .active,
562 .media-router > a.active:last-child {
563         margin: -1px -1px 0;
564         background: #fff;
565         border: 1px solid #ddd;
566         border-bottom: none;
567 }
568
569 .media-router .active:after {
570         display: none;
571 }
572
573 /**
574  * Frame
575  */
576 .media-frame {
577         overflow: hidden;
578         position: absolute;
579         top: 0;
580         right: 0;
581         left: 0;
582         bottom: 0;
583 }
584
585 .media-frame-menu {
586         position: absolute;
587         top: 0;
588         right: 0;
589         bottom: 0;
590         width: 200px;
591         z-index: 150;
592 }
593
594 .media-frame-title {
595         position: absolute;
596         top: 0;
597         right: 200px;
598         left: 0;
599         height: 50px;
600         z-index: 200;
601 }
602
603 .media-frame-router {
604         position: absolute;
605         top: 50px;
606         right: 200px;
607         left: 0;
608         height: 36px;
609         z-index: 200;
610 }
611
612 .media-frame-content {
613         position: absolute;
614         top: 84px;
615         right: 200px;
616         left: 0;
617         bottom: 61px;
618         height: auto;
619         width: auto;
620         margin: 0;
621         overflow: auto;
622         background: #fff;
623         border-top: 1px solid #ddd;
624         border-bottom: 1px solid #ddd;
625 }
626
627 .media-frame-toolbar {
628         position: absolute;
629         right: 200px;
630         left: 0;
631         bottom: 0;
632         height: 60px;
633         z-index: 100;
634 }
635
636 .media-frame.hide-menu .media-frame-title,
637 .media-frame.hide-menu .media-frame-router,
638 .media-frame.hide-menu .media-frame-toolbar,
639 .media-frame.hide-menu .media-frame-content {
640         right: 0;
641 }
642
643 .media-frame.hide-menu .media-frame-menu {
644         right: -200px;
645 }
646
647 .media-frame.hide-toolbar .media-frame-content {
648         bottom: 0;
649 }
650
651 .media-frame.hide-toolbar .media-frame-toolbar {
652         bottom: -61px;
653 }
654
655 .media-frame.hide-router .media-frame-content {
656         top: 50px;
657 }
658
659 .media-frame.hide-router .media-frame-router {
660         display: none;
661 }
662
663 .media-frame.hide-router .media-frame-title {
664         border-bottom: 1px solid #dfdfdf;
665         -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
666         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
667 }
668
669 .media-frame-title .dashicons {
670         display: none;
671 }
672
673 .media-frame-title h1 {
674         padding: 0 16px;
675         font-size: 22px;
676         line-height: 50px;
677         margin: 0;
678 }
679
680 .media-frame-title .suggested-dimensions {
681         font-size: 14px;
682         float: left;
683         margin-left: 20px;
684 }
685
686 .media-frame-content .crop-content {
687         height: 100%;
688 }
689
690 .media-frame-content .crop-content .crop-image {
691         display: block;
692         margin: auto;
693         max-width: 100%;
694         max-height: 100%;
695 }
696
697 .media-frame-content .crop-content .upload-errors
698 {
699         position: absolute;
700         width: 300px;
701         top: 50%;
702         right: 50%;
703         margin-right: -150px;
704         margin-left: -150px;
705         z-index: 600000;
706 }
707
708 /**
709  * Iframes
710  */
711 .media-frame .media-iframe {
712         overflow: hidden;
713 }
714
715 .media-frame .media-iframe,
716 .media-frame .media-iframe iframe {
717         height: 100%;
718         width: 100%;
719         border: 0;
720 }
721
722 /**
723  * Attachment Browser Filters
724  */
725 .media-frame select.attachment-filters {
726         margin-top: 11px;
727         margin-left: 10px;
728 }
729
730 /**
731  * Search
732  */
733 .media-frame .search {
734         margin-top: 11px;
735         padding: 4px;
736         font-size: 13px;
737         color: #464646;
738         font-family: "Open Sans", sans-serif;
739         -webkit-appearance: none;
740 }
741
742 .media-toolbar-secondary .search {
743         margin-left: 16px;
744 }
745
746 /**
747  * Attachments
748  */
749 .attachments {
750         margin: 0;
751         -webkit-overflow-scrolling: touch;
752 }
753
754 /**
755  * Attachment
756  */
757 .attachment {
758         position: relative;
759         float: right;
760         padding: 8px;
761         margin: 0;
762         color: #464646;
763         cursor: pointer;
764         list-style: none;
765         text-align: center;
766         -webkit-user-select: none;
767         -moz-user-select: none;
768         -ms-user-select: none;
769         user-select: none;
770         width: 25%;
771         -webkit-box-sizing: border-box;
772         -moz-box-sizing: border-box;
773         box-sizing: border-box;
774 }
775
776 .attachment:focus,
777 .selected.attachment:focus,
778 .attachment.details:focus {
779         -webkit-box-shadow:
780                 inset 0 0 2px 3px #fff,
781                 inset 0 0 0 7px #5b9dd9;
782         box-shadow:
783                 inset 0 0 2px 3px #fff,
784                 inset 0 0 0 7px #5b9dd9;
785         outline: none;
786 }
787
788 .selected.attachment {
789         -webkit-box-shadow:
790                 inset 0 0 0 5px #fff,
791                 inset 0 0 0 7px #ccc;
792         box-shadow:
793                 inset 0 0 0 5px #fff,
794                 inset 0 0 0 7px #ccc;
795 }
796
797 .attachment.details {
798         -webkit-box-shadow:
799                 inset 0 0 0 3px #fff,
800                 inset 0 0 0 7px #1e8cbe;
801         box-shadow:
802                 inset 0 0 0 3px #fff,
803                 inset 0 0 0 7px #1e8cbe;
804 }
805
806 .attachment-preview {
807         position: relative;
808         -webkit-box-shadow:
809                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
810                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
811         box-shadow:
812                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
813                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
814         background: #eee;
815         cursor: pointer;
816 }
817
818 .attachment-preview:before {
819         content: '';
820         display: block;
821         padding-top: 100%;
822 }
823
824 .attachment .icon {
825         margin: 0 auto;
826         overflow: hidden;
827 }
828
829 .attachment .thumbnail {
830         overflow: hidden;
831         position: absolute;
832         top: 0;
833         left: 0;
834         bottom: 0;
835         right: 0;
836         opacity: 1;
837         -webkit-transition: opacity .1s;
838         transition: opacity .1s;
839 }
840
841 .attachment .portrait img {
842         max-width: 100%;
843 }
844
845 .attachment .landscape img {
846         max-height: 100%;
847 }
848
849 .attachment .thumbnail:after {
850         content: '';
851         display: block;
852         position: absolute;
853         top: 0;
854         right: 0;
855         left: 0;
856         bottom: 0;
857         -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
858         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
859         overflow: hidden;
860 }
861
862 /* @noflip */
863 .attachment .thumbnail img {
864         top: 0;
865         left: 0;
866 }
867
868 /* @noflip */
869 .attachment .thumbnail .centered {
870         position: absolute;
871         top: 0;
872         left: 0;
873         width: 100%;
874         height: 100%;
875         -webkit-transform: translate( 50%, 50% );
876         -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
877         transform: translate( 50%, 50% );
878 }
879
880 .attachment .thumbnail .centered img {
881         -webkit-transform: translate( -50%, -50% );
882         -ms-transform: translate(-50%,-50%);
883         transform: translate( -50%, -50% );
884 }
885
886 .attachment .thumbnail .centered img.icon {
887         -webkit-transform: translate( -50%, -70% );
888         -ms-transform: translate(-50%,-70%);
889         transform: translate( -50%, -70% );
890 }
891
892 .ie8 .attachment img.icon {
893         top: 20%;
894         position: relative;
895 }
896
897 .attachment .filename {
898         position: absolute;
899         right: 0;
900         left: 0;
901         bottom: 0;
902         overflow: hidden;
903         max-height: 100%;
904         word-wrap: break-word;
905         text-align: center;
906         font-weight: bold;
907         background: rgba( 255, 255, 255, 0.8 );
908         -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
909         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
910 }
911
912 .attachment .filename div {
913         padding: 5px 10px;
914 }
915
916 .attachment .thumbnail img {
917         position: absolute;
918 }
919
920 .attachment .close {
921         display: none;
922         position: absolute;
923         top: 5px;
924         left: 5px;
925         height: 22px;
926         width: 22px;
927         padding: 0;
928         font-size: 20px;
929         line-height: 20px;
930         text-align: center;
931         text-decoration: none;
932         color: #464646;
933         background-color: #fff;
934         background-position: -96px 4px;
935         border-width: 0;
936         -webkit-border-radius: 3px;
937         border-radius: 3px;
938         -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
939         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
940 }
941
942 .attachment .close:hover {
943         -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
944         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
945 }
946
947 .attachment:hover .close {
948         display: block;
949 }
950
951 .attachment .check {
952         display: none;
953         height: 24px;
954         width: 24px;
955         position: absolute;
956         z-index: 10;
957         top: 0;
958         left: 0;
959         outline: none;
960         background: #eee;
961         -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
962         box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
963 }
964
965 .attachment .check div {
966         background-position: -1px 0;
967         height: 15px;
968         width: 15px;
969         margin: 5px;
970 }
971
972 .attachment .check:hover div {
973         background-position: -40px 0;
974 }
975
976 .attachment.selected .check {
977         display: block;
978 }
979
980 .attachment.details .check,
981 .attachment.selected .check:focus,
982 .media-frame.mode-grid .attachment.selected .check {
983         background-color: #1e8cbe;
984         -webkit-box-shadow:
985                 0 0 0 1px #fff,
986                 0 0 0 2px #1e8cbe;
987         box-shadow:
988                 0 0 0 1px #fff,
989                 0 0 0 2px #1e8cbe;
990 }
991
992 .attachment.details .check div,
993 .media-frame.mode-grid .attachment.selected .check div {
994         background-position: -21px 0;
995 }
996
997 .attachment.details .check:hover div,
998 .attachment.selected .check:focus div,
999 .media-frame.mode-grid .attachment.selected .check:hover div {
1000         background-position: -60px 0;
1001 }
1002
1003 .media-frame .attachment .describe {
1004         position: relative;
1005         display: block;
1006         width: 100%;
1007         margin: 0;
1008         padding: 8px;
1009         font-size: 12px;
1010         -webkit-border-radius: 0;
1011         border-radius: 0;
1012 }
1013
1014 /**
1015  * Attachments Browser
1016  */
1017 .media-frame .attachments-browser {
1018         position: relative;
1019         width: 100%;
1020         height: 100%;
1021         overflow: hidden;
1022 }
1023
1024 .attachments-browser .media-toolbar {
1025         left: 300px;
1026         height: 50px;
1027 }
1028
1029 .attachments-browser.hide-sidebar .media-toolbar {
1030         left: 0;
1031 }
1032
1033 .attachments-browser .media-toolbar-primary > .media-button,
1034 .attachments-browser .media-toolbar-primary > .media-button-group,
1035 .attachments-browser .media-toolbar-secondary > .media-button,
1036 .attachments-browser .media-toolbar-secondary > .media-button-group {
1037         margin: 11px 0;
1038 }
1039
1040 .attachments-browser .attachments {
1041         padding: 2px 8px 8px;
1042 }
1043
1044 .attachments-browser .attachments,
1045 .attachments-browser .uploader-inline {
1046         position: absolute;
1047         top: 50px;
1048         right: 0;
1049         left: 300px;
1050         bottom: 0;
1051         overflow: auto;
1052         outline: none;
1053 }
1054
1055 .attachments-browser .uploader-inline.hidden {
1056         display: none;
1057 }
1058
1059 .uploader-inline .close {
1060         background-color: transparent;
1061         border: 0;
1062         cursor: pointer;
1063         height: 48px;
1064         position: absolute;
1065         left: 0;
1066         text-align: center;
1067         top: 0;
1068         width: 50px;
1069         z-index: 1;
1070 }
1071
1072 .uploader-inline .close:before {
1073         font: normal 30px/50px 'dashicons' !important;
1074         color: #777;
1075         display: inline-block;
1076         content: '\f335';
1077         font-weight: 300;
1078 }
1079
1080 .attachments-browser.hide-sidebar .attachments,
1081 .attachments-browser.hide-sidebar .uploader-inline {
1082         left: 0;
1083         margin-left: 0;
1084 }
1085
1086 .attachments-browser .instructions {
1087         display: inline-block;
1088         margin-top: 16px;
1089         line-height: 18px;
1090         font-size: 13px;
1091         color: #666;
1092         margin-left: 0.5em;
1093 }
1094
1095 .attachments-browser .no-media {
1096         padding: 2em 2em 0 0;
1097 }
1098
1099 /**
1100  * Progress Bar
1101  */
1102 .media-progress-bar {
1103         position: relative;
1104         height: 10px;
1105         width: 70%;
1106         margin: 10px auto;
1107         -webkit-border-radius: 10px;
1108         border-radius: 10px;
1109         background: #dfdfdf;
1110         background: rgba( 0, 0, 0, 0.1 );
1111 }
1112
1113 .media-progress-bar div {
1114         height: 10px;
1115         min-width: 20px;
1116         width: 0;
1117         background: #1e8cbe;
1118         -webkit-border-radius: 10px;
1119         border-radius: 10px;
1120         -webkit-transition: width 300ms;
1121         transition: width 300ms;
1122 }
1123
1124 .media-uploader-status .media-progress-bar {
1125         display: none;
1126         width: 100%;
1127 }
1128
1129 .uploading.media-uploader-status .media-progress-bar {
1130         display: block;
1131 }
1132
1133 .attachment-preview .media-progress-bar {
1134         position: absolute;
1135         top: 50%;
1136         right: 15%;
1137         width: 70%;
1138         margin: -5px 0 0 0;
1139 }
1140
1141 .media-uploader-status {
1142         position: relative;
1143         margin: 0 auto;
1144         padding-bottom: 10px;
1145         max-width: 400px;
1146 }
1147
1148 .media-sidebar .media-uploader-status {
1149         border-bottom: 1px solid #dfdfdf;
1150 }
1151
1152 .uploader-inline .media-uploader-status h3 {
1153         display: none;
1154 }
1155
1156 .media-uploader-status .upload-details {
1157         display: none;
1158         font-size: 12px;
1159         color: #666;
1160 }
1161
1162 .uploading.media-uploader-status .upload-details {
1163         display: block;
1164 }
1165
1166 .media-uploader-status .upload-detail-separator {
1167         padding: 0 4px;
1168 }
1169
1170 .media-uploader-status .upload-count {
1171         color: #464646;
1172 }
1173
1174 .media-uploader-status .upload-dismiss-errors,
1175 .media-uploader-status .upload-errors {
1176         display: none;
1177 }
1178
1179 .errors.media-uploader-status .upload-dismiss-errors,
1180 .errors.media-uploader-status .upload-errors {
1181         display: block;
1182 }
1183
1184 .media-uploader-status .upload-dismiss-errors {
1185         text-decoration: none;
1186 }
1187
1188 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1189         position: absolute;
1190         top: 0;
1191         left: 0;
1192 }
1193
1194 .upload-errors .upload-error {
1195         margin: 8px auto 0 auto;
1196         padding: 8px;
1197         border: 1px #c00 solid;
1198         background: #ffebe8;
1199         -webkit-border-radius: 3px;
1200         border-radius: 3px;
1201 }
1202
1203 .upload-errors .upload-error-label {
1204         padding: 2px 4px;
1205         margin-left: 8px;
1206         font-weight: bold;
1207         color: #fff;
1208         background: #e00;
1209         background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
1210         background-image: -webkit-linear-gradient(top, #e00, #a00);
1211         background-image: linear-gradient(to bottom, #e00, #a00);
1212         -webkit-border-radius: 3px;
1213         border-radius: 3px;
1214 }
1215
1216 .upload-errors .upload-error-message {
1217         display: block;
1218         padding-top: 8px;
1219         color: #b44;
1220         word-wrap: break-word;
1221 }
1222
1223 .uploader-window {
1224         position: fixed;
1225         top: 0;
1226         right: 0;
1227         left: 0;
1228         bottom: 0;
1229         background: rgba( 0, 86, 132, 0.9 );
1230         z-index: 250000;
1231         display: none;
1232         text-align: center;
1233         opacity: 0;
1234         -webkit-transition: opacity 250ms;
1235         transition: opacity 250ms;
1236 }
1237
1238 .uploader-window-content {
1239         position: absolute;
1240         top: 10px;
1241         right: 10px;
1242         left: 10px;
1243         bottom: 10px;
1244         border: 1px dashed #fff;
1245 }
1246
1247 .uploader-window h3 {
1248         margin: -0.5em 0 0;
1249         position: absolute;
1250         top: 50%;
1251         right: 0;
1252         left: 0;
1253         -webkit-transform: translateY( -50% );
1254         -ms-transform: translateY(-50%);
1255         transform: translateY( -50% );
1256         font-size: 40px;
1257         color: #fff;
1258         padding: 0;
1259 }
1260
1261 .uploader-window .media-progress-bar {
1262         margin-top: 20px;
1263         max-width: 300px;
1264         background: transparent;
1265         border-color: #fff;
1266         display: none;
1267 }
1268
1269 .uploader-window .media-progress-bar div {
1270         background: #fff;
1271 }
1272
1273 .uploading .uploader-window .media-progress-bar {
1274         display: block;
1275 }
1276
1277 .media-frame .uploader-inline {
1278         margin-bottom: 20px;
1279         padding: 0;
1280         text-align: center;
1281 }
1282
1283 .uploader-inline-content {
1284         position: absolute;
1285         top: 30%;
1286         right: 0;
1287         left: 0;
1288 }
1289
1290 .uploader-inline-content .upload-ui {
1291         margin: 2em 0;
1292 }
1293
1294 .uploader-inline-content .post-upload-ui {
1295         margin-bottom: 2em;
1296 }
1297
1298 .uploader-inline .has-upload-message .upload-ui {
1299         margin: 0 0 4em;
1300 }
1301
1302 .uploader-inline h3 {
1303         font-size: 20px;
1304         line-height: 28px;
1305         font-weight: 400;
1306         margin: 0;
1307 }
1308
1309 .uploader-inline .has-upload-message .upload-instructions {
1310         font-size: 14px;
1311         color: #464646;
1312         font-weight: normal;
1313 }
1314
1315 .uploader-inline .drop-instructions {
1316         display: none;
1317 }
1318
1319 .supports-drag-drop .uploader-inline .drop-instructions {
1320         display: block;
1321 }
1322
1323 .uploader-inline p {
1324         font-size: 12px;
1325         margin: 0.5em 0;
1326 }
1327
1328 .uploader-inline .media-progress-bar {
1329         display: none;
1330 }
1331
1332 .uploading.uploader-inline .media-progress-bar {
1333         display: block;
1334 }
1335
1336 .uploader-inline .browser {
1337         display: inline-block !important;
1338 }
1339
1340 /**
1341  * Selection
1342  */
1343 .media-selection {
1344         position: absolute;
1345         top: 0;
1346         right: 0;
1347         left: 350px;
1348         height: 60px;
1349         padding: 0 16px 0 0;
1350         overflow: hidden;
1351         white-space: nowrap;
1352 }
1353
1354 .media-selection .selection-info {
1355         display: inline-block;
1356         font-size: 12px;
1357         height: 60px;
1358         margin-left: 10px;
1359         vertical-align: top;
1360 }
1361
1362 .media-selection.empty,
1363 .media-selection.editing {
1364         display: none;
1365 }
1366
1367 .media-selection.one .edit-selection {
1368         display: none;
1369 }
1370
1371 .media-selection .count {
1372         display: block;
1373         padding-top: 12px;
1374         font-size: 14px;
1375         line-height: 20px;
1376         font-weight: bold;
1377 }
1378
1379 .media-selection .selection-info a {
1380         display: block;
1381         float: right;
1382         padding: 1px 8px;
1383         margin: 1px -8px 1px 8px;
1384         line-height: 16px;
1385         text-decoration: none;
1386         border-left: 1px solid #dfdfdf;
1387         color: #21759B;
1388 }
1389
1390 .media-selection .selection-info a:hover {
1391         background: #21759B;
1392         color: #fff;
1393         border-color: transparent;
1394 }
1395
1396 .media-selection .selection-info a:last-child {
1397         border-left: 0;
1398         margin-left: 0;
1399 }
1400
1401 .media-selection .selection-info .clear-selection {
1402         color: red;
1403 }
1404
1405 .media-selection .selection-info .clear-selection:hover {
1406         background: red;
1407 }
1408
1409 .media-selection .selection-view {
1410         display: inline-block;
1411         vertical-align: top;
1412 }
1413
1414 .media-selection .attachments {
1415         display: inline-block;
1416         height: 48px;
1417         margin: 6px;
1418         padding: 0;
1419         overflow: hidden;
1420         vertical-align: top;
1421 }
1422
1423 .media-selection .attachment {
1424         width: 48px;
1425         padding: 0;
1426         margin: 0;
1427         -webkit-box-shadow: none;
1428         box-shadow: none;
1429 }
1430
1431 .media-selection .attachment .thumbnail {
1432         top: 4px;
1433         left: 4px;
1434         bottom: 4px;
1435         right: 4px;
1436 }
1437
1438 .media-selection .attachment .icon {
1439         width: 50%;
1440 }
1441
1442 .media-selection .attachment-preview {
1443         -webkit-box-shadow: none;
1444         box-shadow: none;
1445         background: none;
1446 }
1447
1448 .media-selection .attachment.selection.details .thumbnail {
1449         -webkit-box-shadow:
1450                 0 0 0 1px #fff,
1451                 0 0 0 3px #1e8cbe;
1452         box-shadow:
1453                 0 0 0 1px #fff,
1454                 0 0 0 3px #1e8cbe;
1455 }
1456
1457 .media-selection:after {
1458         content: '';
1459         display: block;
1460         position: absolute;
1461         top: 0;
1462         left: 0;
1463         bottom: 0;
1464         width: 25px;
1465         background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1466         background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1467         background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1468 }
1469
1470 .media-selection .attachment .filename {
1471         display: none;
1472 }
1473
1474 /**
1475  * Spinner
1476  */
1477 .media-frame .spinner {
1478         background: url(../images/spinner.gif) no-repeat;
1479         -webkit-background-size: 20px 20px;
1480         background-size: 20px 20px;
1481         display: none;
1482         opacity: 0.7;
1483         filter: alpha(opacity=70);
1484         width: 20px;
1485         height: 20px;
1486         margin: 0;
1487 }
1488
1489 .media-toolbar .spinner {
1490         margin-top: 14px;
1491 }
1492
1493 /**
1494  * Attachment Details
1495  */
1496 .attachment-details {
1497         position: relative;
1498         overflow: auto;
1499 }
1500
1501 .attachment-details .settings-save-status {
1502         float: left;
1503         text-transform: none;
1504         z-index: 10;
1505 }
1506
1507 .attachment-details .settings-save-status .spinner {
1508         margin: 0 5px 0;
1509 }
1510
1511 .attachment-details .settings-save-status .saved {
1512         float: left;
1513         display: none;
1514 }
1515
1516 .attachment-details.save-waiting .settings-save-status .spinner,
1517 .attachment-details.save-complete .settings-save-status .saved {
1518         display: block;
1519 }
1520
1521 .attachment-info {
1522         overflow: hidden;
1523         min-height: 60px;
1524         margin-bottom: 16px;
1525         line-height: 18px;
1526         color: #666;
1527         border-bottom: 1px solid #ddd;
1528         padding-bottom: 11px;
1529 }
1530
1531 .attachment-info .filename {
1532         font-weight: bold;
1533         color: #464646;
1534         word-wrap: break-word;
1535 }
1536
1537 .attachment-info .thumbnail {
1538         position: relative;
1539         float: right;
1540         max-width: 120px;
1541         max-height: 120px;
1542         margin-top: 5px;
1543         margin-left: 10px;
1544         margin-bottom: 5px;
1545 }
1546
1547 .uploading .attachment-info .thumbnail {
1548         width: 120px;
1549         height: 80px;
1550         -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1551         box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1552 }
1553
1554 .uploading .attachment-info .media-progress-bar {
1555         margin-top: 35px;
1556 }
1557
1558 .attachment-info .thumbnail-image:after {
1559         content: '';
1560         display: block;
1561         position: absolute;
1562         top: 0;
1563         right: 0;
1564         left: 0;
1565         bottom: 0;
1566         -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1567         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1568         overflow: hidden;
1569 }
1570
1571 .attachment-info .thumbnail img {
1572         display: block;
1573         max-width: 120px;
1574         max-height: 120px;
1575         margin: 0 auto;
1576 }
1577
1578 .attachment-info .details {
1579         float: right;
1580         font-size: 12px;
1581         max-width: 100%;
1582 }
1583
1584 .attachment-info .edit-attachment,
1585 .attachment-info .refresh-attachment,
1586 .attachment-info .delete-attachment,
1587 .attachment-info .trash-attachment,
1588 .attachment-info .untrash-attachment {
1589         display: block;
1590         text-decoration: none;
1591         white-space: nowrap;
1592 }
1593
1594 .attachment-info .refresh-attachment,
1595 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1596         display: none;
1597 }
1598
1599 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1600 .attachment-info .edit-attachment {
1601         display: block;
1602 }
1603
1604 .media-modal .delete-attachment,
1605 .media-modal .trash-attachment,
1606 .media-modal .untrash-attachment {
1607         color: #bc0b0b;
1608 }
1609
1610 .media-modal .delete-attachment:hover,
1611 .media-modal .trash-attachment:hover,
1612 .media-modal .untrash-attachment:hover {
1613         color: red;
1614 }
1615
1616 /**
1617  * Attachment Display Settings
1618  */
1619 .attachment-display-settings {
1620         width: 100%;
1621         float: right;
1622         overflow: hidden;
1623 }
1624
1625 .attachment-display-settings h4 {
1626         margin: 1.4em 0 0.4em;
1627 }
1628
1629 .collection-settings {
1630         overflow: hidden;
1631 }
1632
1633 .collection-settings .setting input[type="checkbox"] {
1634         float: right;
1635         margin-left: 8px;
1636 }
1637
1638 .collection-settings .setting span {
1639         min-width: inherit;
1640 }
1641
1642 /**
1643  * Image Editor
1644  */
1645 .media-modal .imgedit-wrap {
1646         position: static;
1647 }
1648
1649 .media-modal .imgedit-wait {
1650         height: auto !important;
1651         left: 0;
1652         bottom: 0;
1653         right: 0;
1654 }
1655
1656 .media-modal .imgedit-wrap .imgedit-panel-content {
1657         padding: 16px;
1658         position: absolute;
1659         top: 0;
1660         left: 282px;
1661         bottom: 0;
1662         right: 0;
1663         overflow: auto;
1664 }
1665
1666 .media-modal .imgedit-wrap .imgedit-settings {
1667         background: #f3f3f3;
1668         border-right: 1px solid #ddd;
1669         padding: 0 16px 16px;
1670         position: absolute;
1671         top: 0;
1672         left: 0;
1673         bottom: 0;
1674         width: 250px;
1675         overflow: auto;
1676 }
1677
1678 .media-modal .imgedit-group {
1679         background: none;
1680         border: none;
1681         border-bottom: 1px solid #ddd;
1682         -webkit-box-shadow: none;
1683         box-shadow: none;
1684         margin: 0;
1685         margin-bottom: 16px;
1686         padding: 0;
1687         padding-bottom: 16px;
1688         position: relative; /* RTL fix, #WP29352 */
1689 }
1690
1691 .media-modal .imgedit-group:last-of-type {
1692         border: none;
1693         margin: 0;
1694         padding: 0;
1695 }
1696
1697 .media-modal .imgedit-group-top h3 {
1698         text-transform: uppercase;
1699         font-size: 12px;
1700         color: #666;
1701         margin: 0;
1702         margin-top: 24px;
1703 }
1704
1705 .media-modal .imgedit-group-top h3 a {
1706         text-decoration: none;
1707         color: #666;
1708 }
1709
1710 .media-modal .imgedit-help-toggle {
1711         margin-top: -2px;
1712         cursor: pointer;
1713         color: #666;
1714 }
1715
1716 .media-modal .imgedit-help-toggled span.dashicons:before {
1717         content: '\f142';
1718 }
1719
1720 .media-modal .imgedit-group img {
1721         margin-top: 5px;
1722 }
1723
1724 .media-modal .imgedit-wrap div.updated {
1725         margin: 0;
1726         margin-bottom: 16px;
1727 }
1728
1729
1730 /**
1731  * Embed from URL and Image Details
1732  */
1733 .embed-url {
1734         display: block;
1735         position: relative;
1736         padding: 16px;
1737         margin: 0;
1738         z-index: 250;
1739         background: #fff;
1740         font-size: 18px;
1741 }
1742
1743 .media-frame .embed-url input {
1744         font-size: 18px;
1745         padding: 12px 14px;
1746         width: 100%;
1747         min-width: 200px;
1748         -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1749         box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1750 }
1751
1752 .media-frame .embed-url .spinner {
1753         position: absolute;
1754         top: 32px;
1755         left: 26px;
1756 }
1757
1758 .media-frame .embed-loading .embed-url .spinner {
1759         display: block;
1760 }
1761
1762 .embed-link-settings,
1763 .embed-media-settings {
1764         position: absolute;
1765         top: 70px;
1766         right: 0;
1767         left: 0;
1768         bottom: 0;
1769         padding: 16px 16px 32px;
1770         overflow: auto;
1771 }
1772
1773 .embed-preview img, .embed-preview iframe, .embed-preview embed {
1774         max-width: 100%;
1775 }
1776
1777 .embed-preview img {
1778         height: auto;
1779 }
1780
1781 .image-details .media-modal {
1782         right: 140px;
1783         left: 140px;
1784 }
1785
1786 .image-details .media-frame-title,
1787 .image-details .media-frame-content,
1788 .image-details .media-frame-router {
1789         right: 0;
1790 }
1791
1792 .image-details .embed-media-settings {
1793         top: 0;
1794         overflow: visible;
1795         padding: 0;
1796 }
1797
1798 .image-details .embed-media-settings,
1799 .image-details .embed-media-settings div {
1800         -webkit-box-sizing: border-box;
1801         -moz-box-sizing: border-box;
1802         box-sizing: border-box;
1803 }
1804
1805 .image-details .column-settings {
1806         background: #f3f3f3;
1807         border-left: 1px solid #ddd;
1808         min-height: 100%;
1809         width: 55%;
1810         position: absolute;
1811         top: 0;
1812         right: 0;
1813 }
1814
1815 .image-details .column-settings h3 {
1816         margin: 20px;
1817         padding-top: 20px;
1818         border-top: 1px solid #ddd;
1819 }
1820
1821 .image-details .column-image {
1822         width: 45%;
1823         position: absolute;
1824         right: 55%;
1825         top: 0;
1826 }
1827
1828 .image-details .image {
1829         margin: 20px;
1830 }
1831
1832 .image-details .image img {
1833         max-width: 100%;
1834         max-height: 500px;
1835 }
1836
1837 .image-details .advanced-toggle {
1838         color: #666;
1839         text-decoration: none;
1840         display: block;
1841 }
1842
1843 .image-details .advanced-toggle:after {
1844         font: normal 20px/1 'dashicons';
1845         speak: none;
1846         vertical-align: top;
1847         -webkit-font-smoothing: antialiased;
1848         -moz-osx-font-smoothing: grayscale;
1849         content: '\f140';
1850         display: inline-block;
1851         margin-top: -2px;
1852 }
1853
1854 .image-details .advanced-visible .advanced-toggle:after {
1855         content: '\f142';
1856 }
1857
1858 .image-details .embed-media-settings .size {
1859         margin-bottom: 4px;
1860 }
1861
1862 .image-details .custom-size span {
1863         display: block;
1864 }
1865
1866 .image-details .custom-size label {
1867         display: block;
1868         float: right;
1869 }
1870
1871 .image-details .custom-size span small {
1872         color: #999;
1873         font-size: inherit;
1874 }
1875
1876 .image-details .custom-size input {
1877         width: 5em;
1878 }
1879
1880 .image-details .custom-size .sep {
1881         float: right;
1882         margin: 26px 6px 0 6px;
1883 }
1884
1885 .image-details .custom-size:after {
1886         content: '';
1887         display: table;
1888         clear: both;
1889 }
1890
1891 .media-embed .thumbnail {
1892         max-width: 100%;
1893         max-height: 200px;
1894         position: relative;
1895         float: right;
1896 }
1897
1898 .media-embed .thumbnail img {
1899         max-height: 200px;
1900         display: block;
1901 }
1902
1903 .media-embed .thumbnail:after {
1904         content: '';
1905         display: block;
1906         position: absolute;
1907         top: 0;
1908         right: 0;
1909         left: 0;
1910         bottom: 0;
1911         -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1912         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1913         overflow: hidden;
1914 }
1915
1916 .media-embed .setting {
1917         width: 100%;
1918         margin: 10px 0;
1919         float: right;
1920         display: block;
1921         clear: both;
1922 }
1923
1924 .image-details .embed-media-settings .setting {
1925         float: none;
1926         width: auto;
1927 }
1928
1929 .image-details .actions {
1930         margin: 10px 0;
1931 }
1932
1933 .image-details .hidden {
1934         display: none;
1935 }
1936
1937 .media-embed .setting input[type="text"],
1938 .media-embed .setting textarea {
1939         display: block;
1940         width: 100%;
1941         max-width: 400px;
1942         margin: 1px 0;
1943 }
1944
1945 .image-details .embed-media-settings .setting input[type="text"],
1946 .image-details .embed-media-settings .setting textarea {
1947         max-width: inherit;
1948         width: 70%;
1949 }
1950
1951 .image-details .embed-media-settings .setting input.link-to-custom,
1952 .image-details .embed-media-settings .link-target,
1953 .image-details .embed-media-settings .custom-size {
1954         margin-right: 27%;
1955         width: 70%;
1956 }
1957
1958 .image-details .embed-media-settings .link-target {
1959         margin-top: 24px;
1960 }
1961
1962 .media-embed .setting input.hidden,
1963 .media-embed .setting textarea.hidden {
1964         display: none;
1965 }
1966
1967 .media-embed .setting span {
1968         display: block;
1969         width: 200px;
1970         font-size: 13px;
1971         line-height: 24px;
1972         color: #666;
1973 }
1974
1975 .image-details .embed-media-settings .setting span {
1976         float: right;
1977         width: 25%;
1978         text-align: left;
1979         margin: 8px 1% 0 1%;
1980         line-height: 1.1;
1981 }
1982
1983 .media-embed .setting .button-group {
1984         margin: 2px 0;
1985 }
1986
1987 .media-embed-sidebar {
1988         position: absolute;
1989         top: 0;
1990         right: 440px;
1991 }
1992
1993 .advanced-section,
1994 .link-settings {
1995         margin-top: 10px;
1996 }
1997
1998 /* Drag & drop on the editor upload */
1999 #wp-fullscreen-body .uploader-editor,
2000 .wp-editor-wrap .uploader-editor {
2001         background: rgba( 150, 150, 150, 0.9 );
2002         position: absolute;
2003         top: 0;
2004         right: 0;
2005         width: 100%;
2006         height: 100%;
2007         z-index: 99998; /* under the toolbar */
2008         display: none;
2009         text-align: center;
2010 }
2011
2012 #wp-fullscreen-body .uploader-editor {
2013         background: rgba( 0, 86, 132, 0.9 );
2014         position: fixed;
2015         z-index: 100050; /* above the editor toolbar */
2016 }
2017
2018 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
2019         opacity: 0;
2020 }
2021
2022 #wp-fullscreen-body .uploader-editor-content,
2023 .wp-editor-wrap .uploader-editor-content {
2024         border: 1px dashed #fff;
2025         position: absolute;
2026         top: 10px;
2027         right: 10px;
2028         left: 10px;
2029         bottom: 10px;
2030 }
2031
2032 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2033 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2034         position: absolute;
2035         top: 50%;
2036         right: 0;
2037         left: 0;
2038         -webkit-transform: translateY( -50% );
2039         -ms-transform: translateY(-50%);
2040         transform: translateY( -50% );
2041         font-size: 3em;
2042         line-height: 1.3;
2043         font-weight: bold;
2044         color: #fff;
2045         padding: 0;
2046         margin: 0;
2047         display: none;
2048 }
2049
2050 .wp-editor-wrap .uploader-editor.droppable {
2051         background: rgba( 0, 86, 132, 0.9 );
2052 }
2053
2054 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2055 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2056         display: block;
2057 }
2058
2059 /**
2060  * IE7 Fixes
2061  */
2062 .ie7 .media-frame .attachments-browser {
2063         position: static;
2064 }
2065
2066 .ie7 .media-frame .embed-url input {
2067         margin-top: 4px;
2068         width: 90%;
2069 }
2070
2071 .ie7 .compat-item {
2072         width: 99%;
2073 }
2074
2075 .ie7 .attachment-display-settings {
2076         width: auto;
2077 }
2078
2079 .ie7 .attachment-preview,
2080 .ie7 .attachment-preview .thumbnail {
2081         width: 120px;
2082         height: 120px;
2083 }
2084
2085 .ie7 .media-frame .attachment .describe {
2086         width: 102px;
2087 }
2088
2089 .ie7 .media-sidebar .setting select {
2090         max-width: 55%;
2091 }
2092
2093 .ie7 .media-sidebar .setting input[type="text"],
2094 .ie7 .media-sidebar .setting input[type="password"],
2095 .ie7 .media-sidebar .setting input[type="email"],
2096 .ie7 .media-sidebar .setting input[type="number"],
2097 .ie7 .media-sidebar .setting input[type="search"],
2098 .ie7 .media-sidebar .setting input[type="tel"],
2099 .ie7 .media-sidebar .setting input[type="url"],
2100 .ie7 .media-sidebar .setting textarea {
2101         width: 55%;
2102 }
2103
2104 .ie7 .media-sidebar .setting .link-to-custom {
2105         float: right;
2106 }
2107
2108 /**
2109  * Localization
2110  */
2111 .rtl .media-modal,
2112 .rtl .media-frame,
2113 .rtl .media-frame .search,
2114 .rtl .media-frame input[type="text"],
2115 .rtl .media-frame input[type="password"],
2116 .rtl .media-frame input[type="number"],
2117 .rtl .media-frame input[type="search"],
2118 .rtl .media-frame input[type="email"],
2119 .rtl .media-frame input[type="url"],
2120 .rtl .media-frame input[type="tel"],
2121 .rtl .media-frame textarea,
2122 .rtl .media-frame select {
2123         font-family: Tahoma, sans-serif;
2124 }
2125
2126 :lang(he-il) .rtl .media-modal,
2127 :lang(he-il) .rtl .media-frame,
2128 :lang(he-il) .rtl .media-frame .search,
2129 :lang(he-il) .rtl .media-frame input[type="text"],
2130 :lang(he-il) .rtl .media-frame input[type="password"],
2131 :lang(he-il) .rtl .media-frame input[type="number"],
2132 :lang(he-il) .rtl .media-frame input[type="search"],
2133 :lang(he-il) .rtl .media-frame input[type="email"],
2134 :lang(he-il) .rtl .media-frame input[type="url"],
2135 :lang(he-il) .rtl .media-frame textarea,
2136 :lang(he-il) .rtl .media-frame select {
2137         font-family: Arial, sans-serif;
2138 }
2139
2140 @media only screen and (max-width: 940px) {
2141         .media-frame-content .media-toolbar-primary .search,
2142         .media-frame-content .media-toolbar-secondary .attachment-filters {
2143                 max-width: 134px;
2144         }
2145 }
2146
2147 /**
2148  * Responsive layout
2149  */
2150 @media only screen and (max-width: 900px) {
2151
2152         /* Drop-down menu */
2153         .media-frame:not(.hide-menu) .media-frame-title,
2154         .media-frame:not(.hide-menu) .media-frame-router,
2155         .media-frame:not(.hide-menu) .media-frame-content,
2156         .media-frame:not(.hide-menu) .media-frame-toolbar {
2157                 right: 0;
2158         }
2159
2160         .media-frame:not(.hide-menu) .media-frame-menu {
2161                 position: static;
2162                 width: 0;
2163         }
2164
2165         .media-frame:not(.hide-menu) .media-menu {
2166                 width: auto;
2167                 max-width: 80%;
2168                 overflow: auto;
2169                 z-index: 2000;
2170                 top: 50px;
2171                 right: -300px;
2172                 left: auto;
2173                 bottom: auto;
2174                 padding: 5px 0;
2175                 border: 1px solid #ccc;
2176         }
2177
2178         .media-frame:not(.hide-menu) .media-menu.visible {
2179                 right: 0;
2180         }
2181
2182         .media-frame:not(.hide-menu) .media-menu > a {
2183                 padding: 12px 16px;
2184                 font-size: 16px;
2185         }
2186
2187         .media-frame:not(.hide-menu) .media-menu > a.active {
2188                 display: none;
2189         }
2190
2191         .media-frame:not(.hide-menu) .media-menu .separator {
2192                 margin: 5px 10px;
2193         }
2194
2195         .media-frame:not(.hide-menu) .media-frame-title {
2196                 right: 0;
2197                 color: #21759b;
2198         }
2199
2200         .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2201                 display: inline-block;
2202                 line-height: 50px;
2203         }
2204
2205         .media-frame:not(.hide-menu) .media-frame-title h1 {
2206                 line-height: 3;
2207                 font-size: 18px;
2208                 float: right;
2209                 cursor: pointer;
2210         }
2211         /* End drop-down menu */
2212
2213         .media-sidebar {
2214                 width: 230px;
2215         }
2216
2217         .attachments-browser .attachments,
2218         .attachments-browser .uploader-inline,
2219         .attachments-browser .media-toolbar {
2220                 left: 262px;
2221         }
2222
2223         .media-sidebar .setting,
2224         .attachment-details .setting {
2225                 margin: 6px 0px;
2226         }
2227
2228         .media-sidebar .setting input,
2229         .media-sidebar .setting textarea,
2230         .media-sidebar .setting span,
2231         .attachment-details .setting input,
2232         .attachment-details .setting textarea,
2233         .attachment-details .setting span,
2234         .compat-item label span {
2235                 float: none;
2236         }
2237
2238         .media-sidebar .setting span,
2239         .attachment-details .setting span,
2240         .compat-item label span {
2241                 text-align: inherit;
2242                 min-height: 16px;
2243                 margin: 0;
2244                 padding: 8px 2px 0;
2245         }
2246
2247         .media-sidebar .setting .value,
2248         .attachment-details .setting .value {
2249                 float: none;
2250                 width: auto;
2251         }
2252
2253         .media-sidebar .setting input[type="text"],
2254         .media-sidebar .setting input[type="password"],
2255         .media-sidebar .setting input[type="email"],
2256         .media-sidebar .setting input[type="number"],
2257         .media-sidebar .setting input[type="search"],
2258         .media-sidebar .setting input[type="tel"],
2259         .media-sidebar .setting input[type="url"],
2260         .media-sidebar .setting textarea,
2261         .media-sidebar .setting select,
2262         .attachment-details .setting input[type="text"],
2263         .attachment-details .setting input[type="password"],
2264         .attachment-details .setting input[type="email"],
2265         .attachment-details .setting input[type="number"],
2266         .attachment-details .setting input[type="search"],
2267         .attachment-details .setting input[type="tel"],
2268         .attachment-details .setting input[type="url"],
2269         .attachment-details .setting textarea,
2270         .attachment-details .setting select {
2271                 float: none;
2272                 width: 98%;
2273                 max-width: none;
2274                 height: auto;
2275         }
2276
2277         .media-sidebar .setting select.columns,
2278         .attachment-details .setting select.columns {
2279                 width: auto;
2280         }
2281
2282         .media-frame input,
2283         .media-frame textarea,
2284         .media-frame .search {
2285                 padding: 3px 6px;
2286         }
2287
2288         .image-details .column-image {
2289                 width: 30%;
2290                 right: 70%;
2291         }
2292
2293         .image-details .column-settings {
2294                 width: 70%;
2295         }
2296
2297         .image-details .media-modal {
2298                 right: 30px;
2299                 left: 30px;
2300         }
2301
2302         .image-details .embed-media-settings .setting {
2303                 margin: 20px;
2304         }
2305
2306         .image-details .embed-media-settings .setting span {
2307                 float: none;
2308                 text-align: right;
2309                 width: 100%;
2310                 margin-bottom: 4px;
2311         }
2312
2313         .image-details .embed-media-settings .setting input.link-to-custom,
2314         .image-details .embed-media-settings .setting input[type="text"],
2315         .image-details .embed-media-settings .setting textarea {
2316                 width: 100%;
2317                 margin-right: 0;
2318         }
2319
2320         .image-details .embed-media-settings .custom-size {
2321                 margin-right: 20px;
2322         }
2323
2324         .collection-settings .setting input[type="checkbox"] {
2325                 margin-top: 0;
2326         }
2327
2328         .media-selection {
2329                 min-width: 120px;
2330         }
2331
2332         .media-selection:after {
2333                 background: none;
2334         }
2335
2336         .media-selection .attachments {
2337                 display: none;
2338         }
2339
2340         .media-modal .attachments-browser .media-toolbar-primary,
2341         .media-modal .attachments-browser .media-toolbar-secondary {
2342                 width: 50%;
2343         }
2344
2345         .media-modal .attachments-browser .media-toolbar .search {
2346                 max-width: 100%;
2347                 height: auto;
2348                 float: left;
2349         }
2350
2351         .media-modal .attachments-browser .media-toolbar .attachment-filters {
2352                 margin: 11px 0 0;
2353                 height: auto;
2354                 max-width: 65%;
2355                 max-width: -webkit-calc(100% - 38px);
2356                 max-width: calc(100% - 38px);
2357         }
2358
2359         .media-modal .attachments-browser .media-toolbar .spinner {
2360                 margin: 14px 8px 0;
2361         }
2362
2363         /* Text inputs need to be 16px, or they force zooming on iOS */
2364         .media-frame input[type="text"],
2365         .media-frame input[type="password"],
2366         .media-frame input[type="number"],
2367         .media-frame input[type="search"],
2368         .media-frame input[type="email"],
2369         .media-frame input[type="url"],
2370         .media-frame textarea,
2371         .media-frame select {
2372                 font-size: 16px;
2373         }
2374 }
2375
2376 /* Responsive on portrait and landscape */
2377 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2378         /* Full-bleed modal */
2379         .media-modal,
2380         .image-details .media-modal {
2381                 position: fixed;
2382                 top: 0;
2383                 right: 0;
2384                 left: 0;
2385                 bottom: 0;
2386         }
2387
2388         .media-modal-backdrop {
2389                 position: fixed;
2390         }
2391
2392         .media-sidebar {
2393                 z-index: 1900;
2394                 max-width: 70%;
2395                 bottom: 120%;
2396                 -webkit-box-sizing: border-box;
2397                 -moz-box-sizing: border-box;
2398                 box-sizing: border-box;
2399                 padding-bottom: 0;
2400         }
2401
2402         .media-sidebar.visible {
2403                 bottom: 0;
2404         }
2405
2406         .attachments-browser .attachments,
2407         .attachments-browser .uploader-inline,
2408         .attachments-browser .media-toolbar {
2409                 left: 0;
2410         }
2411
2412         .image-details .media-frame-title {
2413                 display: block;
2414                 top: 0;
2415                 font-size: 14px;
2416         }
2417
2418         .image-details .column-image,
2419         .image-details .column-settings {
2420                 width: 100%;
2421                 position: relative;
2422                 right: 0;
2423         }
2424
2425         .image-details .column-settings {
2426                 padding: 4px 0;
2427         }
2428
2429         /* Media tabs on the top */
2430         .media-frame-content .media-toolbar .instructions {
2431                 display: none;
2432         }
2433 }
2434
2435 /* Landscape specific header override */
2436 @media screen and (max-height: 400px) {
2437         .media-menu {
2438                 padding: 0;
2439         }
2440
2441         .media-frame-router {
2442                 top: 44px;
2443         }
2444
2445         .media-frame-content {
2446                 top: 78px;
2447         }
2448
2449         .attachments-browser .attachments {
2450                 top: 40px;
2451         }
2452
2453         /* Prevent unnecessary scrolling on title input */
2454         .embed-link-settings {
2455                 overflow: visible;
2456         }
2457 }
2458
2459 @media only screen and (max-width: 480px) {
2460         .media-frame-content .media-toolbar .search,
2461         .media-frame-content .media-toolbar .attachment-filters {
2462                 max-width: 90px;
2463         }
2464
2465         .media-modal-close {
2466                 top: 5px;
2467                 left: 5px;
2468         }
2469
2470         .media-modal .media-frame-title {
2471                 height: 40px;
2472         }
2473
2474         .media-modal .media-frame-title h1,
2475         .media-frame:not(.hide-menu) .media-frame-title h1 {
2476                 font-size: 18px;
2477                 line-height: 40px;
2478         }
2479
2480         .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2481                 line-height: 40px;
2482         }
2483
2484         .media-frame-router,
2485         .media-frame:not(.hide-menu) .media-menu {
2486                 top: 40px;
2487         }
2488
2489         .media-frame-content {
2490                 top: 74px;
2491         }
2492
2493         .media-frame.hide-router .media-frame-content {
2494                 top: 40px;
2495         }
2496 }
2497
2498 /**
2499  * HiDPI Displays
2500  */
2501 @media print,
2502   (-o-min-device-pixel-ratio: 5/4),
2503   (-webkit-min-device-pixel-ratio: 1.25),
2504   (min-resolution: 120dpi) {
2505
2506         .media-modal-icon {
2507                 background-image: url(../images/uploader-icons-2x.png);
2508                 -webkit-background-size: 134px 15px;
2509                 background-size: 134px 15px;
2510         }
2511
2512         .media-frame .spinner {
2513                 background-image: url(../images/spinner-2x.gif);
2514         }
2515 }
2516
2517 .media-frame-content[data-columns="1"] .attachment {
2518         width: 100%;
2519 }
2520
2521 .media-frame-content[data-columns="2"] .attachment {
2522         width: 50%;
2523 }
2524
2525 .media-frame-content[data-columns="3"] .attachment {
2526         width: 33.33%;
2527 }
2528
2529 .media-frame-content[data-columns="4"] .attachment {
2530         width: 25%;
2531 }
2532
2533 .media-frame-content[data-columns="5"] .attachment {
2534         width: 20%;
2535 }
2536
2537 .media-frame-content[data-columns="6"] .attachment {
2538         width: 16.66%;
2539 }
2540
2541 .media-frame-content[data-columns="7"] .attachment {
2542         width: 14.28%;
2543 }
2544
2545 .media-frame-content[data-columns="8"] .attachment {
2546         width: 12.5%;
2547 }
2548
2549 .media-frame-content[data-columns="9"] .attachment {
2550         width: 11.11%;
2551 }
2552
2553 .media-frame-content[data-columns="10"] .attachment {
2554         width: 10%;
2555 }
2556
2557 .media-frame-content[data-columns="11"] .attachment {
2558         width: 9.09%;
2559 }
2560
2561 .media-frame-content[data-columns="12"] .attachment {
2562         width: 8.33%;
2563 }