Another attempt to fix the http blog redirects.
[WebKit-https.git] / Websites / webkit.org / blog / wp-admin / css / media.css
1 /*------------------------------------------------------------------------------
2   14.0 - Media Screen
3 ------------------------------------------------------------------------------*/
4
5 .media-item .describe {
6         border-collapse: collapse;
7         width: 100%;
8         border-top: 1px solid #dfdfdf;
9         clear: both;
10         cursor: default;
11 }
12
13 .media-item.media-blank .describe {
14         border: 0;
15 }
16
17 .media-item .describe th {
18         vertical-align: top;
19         text-align: left;
20         padding: 5px 10px 10px;
21         width: 140px;
22 }
23
24 .media-item .describe .align th {
25         padding-top: 0;
26 }
27
28 .media-item .media-item-info tr {
29         background-color: transparent;
30 }
31
32 .media-item .describe td {
33         padding: 0 8px 8px 0;
34         vertical-align: top;
35 }
36
37 .media-item thead.media-item-info td {
38         padding: 4px 10px 0;
39 }
40
41 .media-item .media-item-info .A1B1 {
42         padding: 0 0 0 10px;
43 }
44
45 .media-item td.savesend {
46         padding-bottom: 15px;
47 }
48
49 .media-item .thumbnail {
50         max-height: 128px;
51         max-width: 128px;
52 }
53
54 #wpbody-content #async-upload-wrap a {
55         display: none;
56 }
57
58 .media-upload-form {
59         margin-top: 20px;
60 }
61
62 .media-upload-form td label {
63         margin-right: 6px;
64         margin-left: 2px;
65 }
66
67 .media-upload-form .align .field label {
68         display: inline;
69         padding: 0 0 0 23px;
70         margin: 0 1em 0 3px;
71         font-weight: 600;
72 }
73
74 .media-upload-form tr.image-size label {
75         margin: 0 0 0 5px;
76         font-weight: 600;
77 }
78
79 .media-upload-form th.label label {
80         font-weight: 600;
81         margin: 0.5em;
82         font-size: 13px;
83 }
84
85 .media-upload-form th.label label span {
86         padding: 0 5px;
87 }
88
89 .media-item .describe input[type="text"],
90 .media-item .describe textarea {
91         width: 460px;
92 }
93
94 .media-item .describe p.help {
95         margin: 0;
96         padding: 0 0 0 5px;
97 }
98
99 .media-item .edit-attachment,
100 .describe-toggle-on,
101 .describe-toggle-off {
102         display: block;
103         line-height: 36px;
104         float: right;
105         margin-right: 10px;
106 }
107
108 .media-item .describe-toggle-off,
109 .media-item.open .describe-toggle-on {
110         display: none;
111 }
112
113 .media-item.open .describe-toggle-off {
114         display: block;
115 }
116
117 .media-upload-form .media-item {
118         min-height: 36px;
119         margin-bottom: 1px;
120         position: relative;
121         width: 100%;
122         background: #fff;
123 }
124
125 .media-upload-form .media-item,
126 .media-upload-form .media-item .error {
127         -webkit-box-shadow: 0 1px 0 #dfdfdf;
128         box-shadow: 0 1px 0 #dfdfdf;
129 }
130
131 #media-items:empty {
132         border: 0 none;
133 }
134
135 .media-item .filename {
136         line-height: 36px;
137         overflow: hidden;
138         margin-left: 6px;
139 }
140
141 .media-item .pinkynail {
142         float: left;
143         margin: 2px 10px 0 3px;
144         max-width: 40px;
145         max-height: 32px;
146 }
147
148 .media-item .startopen,
149 .media-item .startclosed {
150         display: none;
151 }
152
153 .media-item .original {
154         position: relative;
155         height: 34px;
156 }
157
158 .media-item .progress {
159         float: right;
160         height: 22px;
161         margin: 7px 6px;
162         width: 200px;
163         line-height: 2em;
164         padding: 0;
165         overflow: hidden;
166         -webkit-border-radius: 22px;
167         border-radius: 22px;
168         background: #ddd;
169         -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
170         box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
171 }
172
173 .media-item .bar {
174         z-index: 9;
175         width: 0;
176         height: 100%;
177         margin-top: -22px;
178         -webkit-border-radius: 22px;
179         border-radius: 22px;
180         background-color: #0073aa;
181         -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
182         box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
183 }
184
185 .media-item .progress .percent {
186         z-index: 10;
187         position: relative;
188         width: 200px;
189         padding: 0;
190         color: #fff;
191         text-align: center;
192         line-height: 22px;
193         font-weight: 400;
194         text-shadow: 0 1px 2px rgba(0,0,0,0.2);
195 }
196
197 .upload-php .fixed .column-parent {
198         width: 15%;
199 }
200
201 .js .html-uploader #plupload-upload-ui {
202         display: none;
203 }
204
205 .js .html-uploader #html-upload-ui {
206         display: block;
207 }
208
209 .media-upload-form .media-item.error,
210 .media-upload-form .media-item .error {
211         width: auto;
212         margin: 0 0 1px 0;
213 }
214
215 .media-upload-form .media-item .error {
216         padding: 10px 0 10px 14px;
217 }
218
219 .media-item .error-div a.dismiss {
220         display: block;
221         float: right;
222         margin: 0 10px 0 15px;
223 }
224
225 /*------------------------------------------------------------------------------
226   14.1 - Media Library
227 ------------------------------------------------------------------------------*/
228
229 .find-box {
230         background-color: #fff;
231         -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
232         box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
233         width: 600px;
234         overflow: hidden;
235         margin-left: -300px;
236         position: fixed;
237         top: 30px;
238         bottom: 30px;
239         left: 50%;
240         z-index: 100105;
241 }
242
243 .find-box-head {
244         background: #fcfcfc;
245         border-bottom: 1px solid #dfdfdf;
246         height: 36px;
247         font-size: 18px;
248         font-weight: 600;
249         line-height: 36px;
250         padding: 0 36px 0 16px;
251         position: absolute;
252         top: 0;
253         left: 0;
254         right: 0;
255 }
256
257 .find-box-inside {
258         overflow: auto;
259         padding: 16px;
260         background-color: #fff;
261         position: absolute;
262         top: 37px;
263         bottom: 45px;
264         overflow-y: scroll;
265         width: 100%;
266         -webkit-box-sizing: border-box;
267         -moz-box-sizing: border-box;
268         box-sizing: border-box;
269 }
270
271 .find-box-search {
272         padding-bottom: 16px;
273 }
274
275 .find-box-search .spinner {
276         float: none;
277         left: 105px;
278         position: absolute;
279 }
280
281 .find-box-search,
282 #find-posts-response {
283         position: relative; /* RTL fix, #WP28010 */
284 }
285
286 #find-posts-input,
287 #find-posts-search {
288         float: left;
289 }
290
291 #find-posts-input {
292         width: 140px;
293         height: 28px;
294         margin: 0 4px 0 0;
295 }
296
297 .widefat .found-radio {
298         padding-right: 0;
299         width: 16px;
300 }
301
302 #find-posts-close {
303         width: 36px;
304         height: 36px;
305         position: absolute;
306         top: 0;
307         right: 0;
308         cursor: pointer;
309         text-align: center;
310         color: #666;
311 }
312
313 #find-posts-close:hover {
314         color: #00a0d2;
315 }
316
317 #find-posts-close:before {
318         font: normal 20px/36px 'dashicons';
319         vertical-align: top;
320         speak: none;
321         -webkit-font-smoothing: antialiased;
322         -moz-osx-font-smoothing: grayscale;
323         content: '\f158';
324 }
325
326 .find-box-buttons {
327         padding: 8px 16px;
328         background: #fcfcfc;
329         border-top: 1px solid #dfdfdf;
330         position: absolute;
331         bottom: 0;
332         left: 0;
333         right: 0;
334 }
335
336 @media screen and ( max-width: 782px ) {
337         .find-box-inside {
338                 bottom: 57px;
339         }
340 }
341
342 @media screen and ( max-width: 660px ) {
343
344         .find-box {
345                 top: 0;
346                 bottom: 0;
347                 left: 0;
348                 right: 0;
349                 margin: 0;
350                 width: 100%;
351         }
352
353 }
354
355 .ui-find-overlay {
356         position: fixed;
357         top: 0;
358         left: 0;
359         right: 0;
360         bottom: 0;
361         background: #000;
362         opacity: 0.7;
363         filter: alpha(opacity=70);
364         z-index: 100100;
365 }
366
367 ul#dismissed-updates {
368         display: none;
369 }
370
371 form.upgrade {
372         margin-top: 8px;
373 }
374
375 form.upgrade .hint {
376         font-style: italic;
377         font-size: 85%;
378         margin: -0.5em 0 2em 0;
379 }
380
381 #poststuff .inside .the-tagcloud {
382         margin: 5px 0 10px;
383         padding: 8px;
384         border: 1px solid #ddd;
385         line-height: 1.8em;
386         word-spacing: 3px;
387         -webkit-border-radius: 6px;
388         border-radius: 6px;
389 }
390
391 .drag-drop #drag-drop-area {
392         border: 4px dashed #b4b9be;
393         height: 200px;
394 }
395
396 .drag-drop .drag-drop-inside {
397         margin: 70px auto 0;
398         width: 250px;
399 }
400
401 .drag-drop-inside p {
402         color: #a0a5aa;
403         font-size: 14px;
404         margin: 5px 0;
405         display: none;
406 }
407
408 .drag-drop .drag-drop-inside p {
409         text-align: center;
410 }
411
412 .drag-drop-inside p.drag-drop-info {
413         font-size: 20px;
414 }
415
416 .drag-drop .drag-drop-inside p,
417 .drag-drop-inside p.drag-drop-buttons {
418         display: block;
419 }
420
421 /*
422 #drag-drop-area:-moz-drag-over {
423         border-color: #83b4d8;
424 }
425 border color while dragging a file over the uploader drop area */
426 .drag-drop.drag-over #drag-drop-area {
427         border-color: #83b4d8;
428 }
429
430 #plupload-upload-ui {
431         position: relative;
432 }
433
434 /**
435  * Media Library grid view
436  */
437
438 .media-frame.mode-grid,
439 .media-frame.mode-grid .media-frame-content,
440 .media-frame.mode-grid .attachments-browser .attachments,
441 .media-frame.mode-grid .uploader-inline-content {
442         position: static;
443 }
444
445 /* Regions we don't use at all */
446 .media-frame.mode-grid .media-frame-title,
447 .media-frame.mode-grid .media-frame-router,
448 .media-frame.mode-grid .media-frame-menu {
449         display: none;
450 }
451
452 .media-frame.mode-grid .media-frame-content {
453         background-color: transparent;
454         border: none;
455 }
456
457 .upload-php .mode-grid .media-sidebar {
458         position: relative;
459         width: auto;
460         margin-bottom: 16px;
461         padding: 0 16px;
462         border: 1px solid #c00;
463         background-color: #feebe8;
464 }
465
466 .upload-php .mode-grid .hide-sidebar .media-sidebar {
467         display: none;
468 }
469
470 .upload-php .mode-grid .media-sidebar .media-uploader-status {
471         border-bottom: none;
472         padding-bottom: 0;
473         max-width: 100%;
474 }
475
476 .upload-php .mode-grid .media-sidebar .upload-error {
477         margin: 20px 0;
478         padding: 0;
479         border: none;
480         background: none;
481 }
482
483 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
484         font-size: 0;
485         top: -12px;
486         right: -10px;
487 }
488
489 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
490         content: "\f158";
491         font: normal 20px/1 dashicons;
492         color: #666;
493 }
494
495 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
496 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
497         color: #00a0d2;
498 }
499
500 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
501         display: none;
502 }
503
504 .media-frame.mode-grid .uploader-inline {
505         position: relative;
506         top: auto;
507         right: auto;
508         left: auto;
509         bottom: auto;
510         padding-top: 0;
511         margin-top: 0;
512         border: 4px dashed #b4b9be;
513 }
514
515 .media-frame.mode-select .attachments-browser.fixed .attachments {
516         position: relative;
517         top: 94px; /* prevent jumping up when the toolbar becomes fixed */
518         padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
519 }
520
521 .media-frame.mode-grid .attachment:focus,
522 .media-frame.mode-grid .selected.attachment:focus,
523 .media-frame.mode-grid .attachment.details:focus {
524         -webkit-box-shadow:
525                 inset 0 0 2px 3px #f1f1f1,
526                 inset 0 0 0 7px #5b9dd9;
527         box-shadow:
528                 inset 0 0 2px 3px #f1f1f1,
529                 inset 0 0 0 7px #5b9dd9;
530         outline: none;
531 }
532
533 .media-frame.mode-grid .selected.attachment {
534         -webkit-box-shadow:
535                 inset 0 0 0 5px #f1f1f1,
536                 inset 0 0 0 7px #ccc;
537         box-shadow:
538                 inset 0 0 0 5px #f1f1f1,
539                 inset 0 0 0 7px #ccc;
540 }
541
542 .media-frame.mode-grid .attachment.details {
543         -webkit-box-shadow:
544                 inset 0 0 0 3px #f1f1f1,
545                 inset 0 0 0 7px #1e8cbe;
546         box-shadow:
547                 inset 0 0 0 3px #f1f1f1,
548                 inset 0 0 0 7px #1e8cbe;
549 }
550
551 .media-frame.mode-grid.mode-select .attachment .thumbnail {
552         opacity: 0.65;
553 }
554
555 .media-frame.mode-select .attachment.selected .thumbnail {
556         opacity: 1;
557 }
558
559 .media-frame.mode-grid .media-toolbar {
560         margin-bottom: 15px;
561         height: auto;
562 }
563
564 .media-frame.mode-grid .media-toolbar select {
565         margin: 0 10px 0 0;
566         font-size: 14px;
567 }
568
569 .media-frame.mode-grid .media-toolbar-secondary > .media-button {
570         margin-top: 10px;
571         margin-bottom: 10px;
572 }
573
574 .media-frame.mode-grid .attachments-browser .bulk-select {
575         display: inline-block;
576         margin: 0 10px 0 0;
577 }
578
579 .media-frame.mode-grid .search {
580         margin-top: 0;
581 }
582
583 .media-frame.mode-grid .spinner {
584         margin-top: 15px;
585 }
586
587 .attachments-browser .media-toolbar-secondary > .media-button {
588         margin-right: 10px;
589 }
590
591 .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
592         position: fixed;
593         top: 32px;
594         left: auto;
595         right: 20px;
596         margin-top: 0;
597 }
598
599 .media-frame.mode-grid .attachments-browser {
600         padding: 0;
601 }
602
603 .media-frame.mode-grid .attachments-browser .attachments {
604         padding: 2px;
605 }
606
607 .media-frame.mode-grid .attachments-browser .no-media {
608         color: #999;
609         font-size: 18px;
610         font-style: normal;
611         margin: 0;
612         padding: 100px 0 0;
613         text-align: center;
614 }
615
616 /**
617  * Attachment details modal
618  */
619
620 .edit-attachment-frame {
621         display: block;
622         height: 100%;
623         width: 100%;
624 }
625
626 .edit-attachment-frame .edit-media-header {
627         overflow: hidden;
628 }
629
630 .upload-php .media-modal-close .media-modal-icon:before {
631         content: '\f335';
632         font-size: 22px;
633 }
634
635 .upload-php .media-modal-close .media-modal-icon {
636         margin: 14px;
637         width: 22px;
638 }
639
640 .upload-php .media-modal-close,
641 .edit-attachment-frame .edit-media-header .left,
642 .edit-attachment-frame .edit-media-header .right {
643         cursor: pointer;
644         color: #777;
645         background-color: transparent;
646         height: 50px;
647         width: 50px;
648         padding: 0;
649         position: absolute;
650         text-align: center;
651         border: 0;
652         border-left: 1px solid #ddd;
653         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
654     transition: color .1s ease-in-out, background .1s ease-in-out;
655 }
656
657 .upload-php .media-modal-close {
658         top: 0;
659         right: 0;
660 }
661
662 .edit-attachment-frame .edit-media-header .left {
663         right: 102px;
664 }
665
666 .edit-attachment-frame .edit-media-header .right {
667         right: 51px;
668 }
669
670 .edit-attachment-frame .media-frame-title {
671         left: 0;
672         right: 150px; /* leave space for prev/next/close */
673 }
674
675 .edit-attachment-frame .edit-media-header .right:before,
676 .edit-attachment-frame .edit-media-header .left:before {
677         font: normal 20px/50px 'dashicons' !important;
678         display: inline;
679         font-weight: 300;
680 }
681
682 .upload-php .media-modal-close:hover,
683 .upload-php .media-modal-close:focus,
684 .edit-attachment-frame .edit-media-header .left:hover,
685 .edit-attachment-frame .edit-media-header .right:hover,
686 .edit-attachment-frame .edit-media-header .left:focus,
687 .edit-attachment-frame .edit-media-header .right:focus {
688         background: #ddd;
689         border-color: #ccc;
690         color: #000;
691         outline: none;
692 }
693
694 .upload-php .media-modal-close:focus .media-modal-icon:before,
695 .upload-php .media-modal-close:hover .media-modal-icon:before {
696         color: #000;
697 }
698
699 .edit-attachment-frame .edit-media-header .left:before,
700 .rtl .edit-attachment-frame .edit-media-header .right:before {
701         content: '\f341';
702 }
703
704 .edit-attachment-frame .edit-media-header .right:before,
705 .rtl .edit-attachment-frame .edit-media-header .left:before {
706         content: '\f345';
707 }
708
709 .edit-attachment-frame .edit-media-header .left.disabled,
710 .edit-attachment-frame .edit-media-header .right.disabled,
711 .edit-attachment-frame .edit-media-header .left.disabled:hover,
712 .edit-attachment-frame .edit-media-header .right.disabled:hover {
713         color: #ccc;
714         background: inherit;
715         cursor: default;
716         pointer-events: none;
717 }
718
719 .edit-attachment-frame .media-frame-content,
720 .edit-attachment-frame .media-frame-router {
721         left: 0;
722 }
723
724 .edit-attachment-frame .media-frame-content {
725         border-bottom: none;
726         bottom: 0;
727         top: 50px;
728 }
729
730 .edit-attachment-frame .attachment-details {
731         position: absolute;
732         overflow: auto;
733         top: 0;
734         bottom: 0;
735         right: 0;
736         left: 0;
737         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
738         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
739 }
740
741 .edit-attachment-frame .attachment-media-view {
742         float: left;
743         width: 65%;
744         height: 100%;
745 }
746
747 .edit-attachment-frame .attachment-media-view .thumbnail {
748         -webkit-box-sizing: border-box;
749         -moz-box-sizing: border-box;
750         box-sizing: border-box;
751         padding: 16px;
752         height: 100%;
753 }
754
755 .edit-attachment-frame .attachment-media-view .details-image {
756         display: block;
757         margin-bottom: 16px;
758         max-width: 100%;
759         max-height: 90%;
760         max-height: -webkit-calc( 100% - 42px );
761         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
762 }
763
764 .edit-attachment-frame .wp-media-wrapper {
765         margin-bottom: 12px;
766 }
767
768 .edit-attachment-frame input,
769 .edit-attachment-frame textarea {
770         padding: 6px 8px;
771         line-height: 16px;
772 }
773
774 .edit-attachment-frame .attachment-info {
775         overflow: auto;
776         -webkit-box-sizing: border-box;
777         -moz-box-sizing: border-box;
778         box-sizing: border-box;
779         margin-bottom: 0;
780         padding: 12px 16px 0;
781         width: 35%;
782         height: 100%;
783         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
784         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
785         border-bottom: 0;
786         border-left: 1px solid #ddd;
787         background: #f3f3f3;
788 }
789
790 .edit-attachment-frame .attachment-info .details,
791 .edit-attachment-frame .attachment-info .settings {
792         position: relative; /* RTL fix, #WP29352 */
793         overflow: hidden;
794         float: none;
795         margin-bottom: 15px;
796         padding-bottom: 15px;
797         border-bottom: 1px solid #ddd;
798 }
799
800 .edit-attachment-frame .attachment-info .filename {
801         font-weight: normal;
802         color: #666;
803 }
804
805 .edit-attachment-frame .attachment-info .thumbnail {
806         margin-bottom: 12px;
807 }
808
809 .attachment-info .actions {
810         margin-bottom: 16px;
811 }
812
813 .attachment-info .actions a {
814         display: inline;
815         text-decoration: none;
816 }
817
818
819 /*------------------------------------------------------------------------------
820   14.2 - Image Editor
821 ------------------------------------------------------------------------------*/
822
823 .wp_attachment_details label[for="content"] {
824         font-size: 13px;
825         line-height: 1.5;
826         margin: 1em 0;
827 }
828
829 .wp_attachment_details #attachment_caption {
830         height: 4em;
831 }
832
833 .describe .image-editor {
834         vertical-align: top;
835 }
836
837 .imgedit-wrap {
838         position: relative;
839 }
840
841 .imgedit-settings p {
842         margin: 8px 0 0;
843 }
844
845 .describe .imgedit-wrap .imgedit-settings {
846         padding: 0 5px;
847 }
848
849 .wp_attachment_holder div.updated {
850         margin-top: 0;
851 }
852
853 .wp_attachment_holder .imgedit-wrap > div {
854         height: auto;
855         overflow: hidden;
856 }
857
858 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
859         padding-right: 16px;
860         width: auto;
861         overflow: hidden;
862 }
863
864 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
865         float: right;
866         width: 250px;
867 }
868
869 .imgedit-settings input {
870         margin-top: 0;
871         vertical-align: middle;
872 }
873
874 .imgedit-wait {
875         position: absolute;
876         top: 0;
877         background: #fff url(../images/spinner.gif) no-repeat center;
878         -webkit-background-size: 20px 20px;
879         background-size: 20px 20px;
880         opacity: 0.7;
881         filter: alpha(opacity=70);
882         width: 100%;
883         height: 500px;
884         display: none;
885 }
886
887 .no-float {
888         float: none;
889 }
890
891 .media-disabled,
892 .imgedit-settings .disabled {
893         color: grey;
894 }
895
896 .wp_attachment_image,
897 .A1B1 {
898         overflow: hidden;
899 }
900
901 .wp_attachment_image .button,
902 .A1B1 .button {
903         float: left;
904 }
905
906 .no-js .wp_attachment_image .button {
907         display: none;
908 }
909
910 .wp_attachment_image .spinner,
911 .A1B1 .spinner {
912         float: left;
913 }
914
915 .imgedit-menu {
916         margin: 0 0 12px;
917         min-width: 300px;
918 }
919
920 .imgedit-menu div {
921         float: left;
922         width: 32px;
923         border: 1px solid #d5d5d5;
924         background: #f1f1f1;
925         margin: 0 8px 0 0;
926         height: 32px;
927         -webkit-font-smoothing: antialiased;
928         -moz-osx-font-smoothing: grayscale;
929         text-align: center;
930         line-height: 28px;
931         color: #777;
932         cursor: pointer;
933 }
934
935 .imgedit-menu div:before {
936         font: normal 20px/1 'dashicons';
937         speak: none;
938         vertical-align: middle;
939 }
940
941 .imgedit-menu div:hover {
942         border-color: #c1c1c1;
943         background-color: #eaeaea;
944         color: #32373c;
945 }
946
947 .imgedit-menu div.disabled {
948         border-color: #ccc;
949         background-color: #ddd;
950         color: #777;
951         filter: alpha(opacity=50);
952         opacity: 0.5;
953         cursor: default;
954 }
955
956 .imgedit-crop:before {
957         content:'\f165';
958 }
959
960 .imgedit-rleft:before {
961         content:'\f166';
962 }
963
964 .imgedit-rright:before {
965         content:'\f167';
966 }
967
968 .imgedit-flipv:before {
969         content:'\f168';
970 }
971
972 .imgedit-fliph:before {
973         content:'\f169';
974 }
975
976 .imgedit-undo:before {
977         content:'\f171';
978 }
979
980 .imgedit-redo:before {
981         content:'\f172';
982 }
983
984 .imgedit-crop-wrap {
985         position: relative;
986 }
987
988 .imgedit-crop {
989         margin: 0 8px 0 0;
990 }
991
992 .imgedit-rleft {
993         margin: 0 3px;
994 }
995
996 .imgedit-rright {
997         margin: 0 8px 0 3px;
998 }
999
1000 .imgedit-flipv {
1001         margin: 0 3px;
1002 }
1003
1004 .imgedit-fliph {
1005         margin: 0 8px 0 3px;
1006 }
1007
1008 .imgedit-undo {
1009         margin: 0 3px;
1010 }
1011
1012 .imgedit-redo {
1013         margin: 0 8px 0 3px;
1014 }
1015
1016 .imgedit-applyto img {
1017         margin: 0 8px 0 0;
1018 }
1019
1020 .imgedit-group-top {
1021         margin: 5px 0;
1022 }
1023
1024 #poststuff .imgedit-group-top h3 {
1025         padding: 0;
1026 }
1027
1028 .imgedit-group-top h3 a {
1029         text-decoration: none;
1030 }
1031
1032 .imgedit-applyto .imgedit-label {
1033         padding: 2px 0 0;
1034         display: block;
1035 }
1036
1037 .imgedit-help {
1038         display: none;
1039         font-style: italic;
1040 }
1041
1042 a.imgedit-help-toggle {
1043         text-decoration: none;
1044 }
1045
1046 .form-table td.imgedit-response {
1047         padding: 0;
1048 }
1049
1050 .imgedit-submit {
1051         margin: 8px 0;
1052 }
1053
1054 .imgedit-submit-btn {
1055         margin-left: 20px;
1056 }
1057
1058 .imgedit-wrap .nowrap {
1059         white-space: nowrap;
1060 }
1061
1062 span.imgedit-scale-warn {
1063         color: red;
1064         font-size: 20px;
1065         font-style: normal;
1066         visibility: hidden;
1067         vertical-align: middle;
1068 }
1069
1070 .imgedit-group {
1071         margin-bottom: 8px;
1072         padding: 2px 10px;
1073 }
1074
1075 audio, video {
1076         display: inline-block;
1077         max-width: 100%;
1078 }
1079
1080 .mejs-container {
1081         width: 100%;
1082         max-width: 100%;
1083 }
1084
1085 /* =Media Queries
1086 -------------------------------------------------------------- */
1087
1088 /**
1089  * HiDPI Displays
1090  */
1091 @media print,
1092   (-webkit-min-device-pixel-ratio: 1.25),
1093   (min-resolution: 120dpi) {
1094         .imgedit-wait {
1095                 background-image: url(../images/spinner-2x.gif);
1096         }
1097 }
1098
1099 @media screen and ( max-width: 782px ) {
1100         .wp_attachment_details label[for="content"] {
1101                 font-size: 14px;
1102                 line-height: 1.5em;
1103         }
1104
1105         .media-upload-form .media-item.error,
1106         .media-upload-form .media-item .error {
1107                 font-size: 13px;
1108                 line-height: 1.5;
1109         }
1110
1111         .media-upload-form .media-item.error {
1112                 padding: 1px 10px;
1113         }
1114
1115         .media-upload-form .media-item .error {
1116                 padding: 10px 0 10px 12px;
1117         }
1118 }
1119
1120 /**
1121  * Media queries for media grid.
1122  */
1123
1124 @media only screen and (max-width: 1120px) {
1125         /* override for media-views.css */
1126         #wp-media-grid .wp-filter .attachment-filters {
1127                 max-width: 100%;
1128         }
1129 }
1130
1131 @media only screen and ( max-width: 782px ) {
1132         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1133                 top: 46px;
1134                 right: 10px;
1135         }
1136 }
1137
1138 @media only screen and (max-width: 600px) {
1139         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1140                 top: 0;
1141         }
1142 }
1143
1144 @media only screen and (max-width: 480px) {
1145         .edit-attachment-frame .media-frame-title {
1146                 right: 110px;
1147         }
1148
1149         .upload-php .media-modal-close,
1150         .edit-attachment-frame .edit-media-header .left,
1151         .edit-attachment-frame .edit-media-header .right {
1152                 width: 40px;
1153                 height: 40px;
1154         }
1155
1156         .upload-php .media-modal-close .media-modal-icon {
1157                 margin: 9px 10px;
1158         }
1159
1160         .edit-attachment-frame .edit-media-header .right:before,
1161         .edit-attachment-frame .edit-media-header .left:before {
1162                 line-height: 40px !important;
1163         }
1164
1165         .edit-attachment-frame .edit-media-header .left {
1166                 right: 82px;
1167         }
1168
1169         .edit-attachment-frame .edit-media-header .right {
1170                 right: 41px;
1171         }
1172
1173         .edit-attachment-frame .media-frame-content {
1174                 top: 40px;
1175         }
1176
1177         .edit-attachment-frame .attachment-media-view {
1178                 float: none;
1179                 height: auto;
1180                 width: 100%;
1181         }
1182
1183         .edit-attachment-frame .attachment-info {
1184                 height: auto;
1185                 width: 100%;
1186         }
1187 }
1188
1189 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1190         .upload-php .mode-grid .media-sidebar{
1191                 max-width: 100%;
1192         }
1193 }