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         line-height: 16px;
  20 }
  21
  22 .media-frame select,
  23 .wp-admin .media-frame select {
  24         line-height: 28px;
  25         margin-top: 3px;
  26 }
  27
  28 .media-frame a {
  29         border-bottom: none;
  30         color: #21759b;
  31 }
  32
  33 .media-frame a:hover {
  34         color: #d54e21;
  35 }
  36
  37 .media-frame a.button {
  38         color: #333;
  39 }
  40
  41 .media-frame a.button:hover {
  42         color: #222;
  43 }
  44
  45 .media-frame a.button-primary,
  46 .media-frame a.button-primary:hover {
  47         color: #fff;
  48 }
  49
  50 .media-frame input[type="text"],
  51 .media-frame input[type="password"],
  52 .media-frame input[type="number"],
  53 .media-frame input[type="search"],
  54 .media-frame input[type="email"],
  55 .media-frame input[type="url"],
  56 .media-frame textarea,
  57 .media-frame select {
  58         font-family: "Open Sans", sans-serif;
  59         font-size: 12px;
  60         -moz-box-sizing: border-box;
  61         -webkit-box-sizing: border-box;
  62         -ms-box-sizing: border-box; /* ie8 only */
  63         box-sizing: border-box;
  64         border-width: 1px;
  65         border-style: solid;
  66         border-color: #dfdfdf;
  67 }
  68
  69 .media-frame select {
  70         height: 24px;
  71         padding: 2px;
  72 }
  73
  74 .media-frame input:disabled,
  75 .media-frame textarea:disabled,
  76 .media-frame input[readonly],
  77 .media-frame textarea[readonly] {
  78         background-color: #eee;
  79 }
  80
  81 .media-frame input[type="search"] {
  82         -webkit-appearance: textfield;
  83 }
  84
  85 .media-frame :-moz-placeholder {
  86    color: #a9a9a9;
  87 }
  88
  89 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
  90 .ui-sortable,
  91 .ui-draggable {
  92         -ms-touch-action: none;
  93         touch-action:     none;
  94 }
  95
  96 .meta-box-sortables.ui-sortable {
  97         -ms-touch-action: auto;
  98         touch-action:     auto;
  99 }
 100
 101 .meta-box-sortables.ui-sortable .hndle {
 102         -ms-touch-action: none;
 103         touch-action:     none;
 104 }
 105
 106 /**
 107  * Modal
 108  */
 109 .media-modal {
 110         position: fixed;
 111         top: 30px;
 112         right: 30px;
 113         left: 30px;
 114         bottom: 30px;
 115         z-index: 160000;
 116 }
 117
 118 .wp-customizer .media-modal {
 119         z-index: 560000;
 120 }
 121
 122 .media-modal-backdrop {
 123         position: fixed;
 124         top: 0;
 125         right: 0;
 126         left: 0;
 127         bottom: 0;
 128         min-height: 360px;
 129         background: #000;
 130         opacity: 0.7;
 131         z-index: 159900;
 132 }
 133
 134 .wp-customizer .media-modal-backdrop {
 135         z-index: 559900;
 136 }
 137
 138 .media-modal-close {
 139         position: absolute;
 140         text-decoration: none;
 141         top: 5px;
 142         left: 10px;
 143         width: 30px;
 144         height: 30px;
 145         z-index: 1000;
 146 }
 147
 148 .media-modal-close span.media-modal-icon {
 149         display: block;
 150         margin: 8px auto 0;
 151         width: 15px;
 152         height: 15px;
 153         background-image: none;
 154 }
 155
 156 .media-modal-close .media-modal-icon:before {
 157         content: '\f158';
 158         font: normal 20px/1 'dashicons';
 159         speak: none;
 160         vertical-align: middle;
 161         -webkit-font-smoothing: antialiased;
 162         -moz-osx-font-smoothing: grayscale;
 163         color: #666;
 164 }
 165
 166 .media-modal-close:hover .media-modal-icon:before {
 167         color: #2ea2cc;
 168 }
 169
 170 .media-modal-close:active {
 171         outline: 0;
 172 }
 173
 174 .media-modal-content {
 175         position: absolute;
 176         top: 0;
 177         right: 0;
 178         left: 0;
 179         bottom: 0;
 180         overflow: auto;
 181         min-height: 300px;
 182         box-shadow: 0 5px 15px rgba(0,0,0,0.7);
 183         background: #fcfcfc;
 184         -webkit-font-smoothing: subpixel-antialiased;
 185 }
 186
 187 .media-modal-icon {
 188         background-image: url(../images/uploader-icons.png);
 189         background-repeat: no-repeat;
 190 }
 191
 192 /**
 193  * Toolbar
 194  */
 195 .media-toolbar {
 196         position: absolute;
 197         top: 0;
 198         right: 0;
 199         left: 0;
 200         z-index: 100;
 201         height: 60px;
 202         padding: 0 16px;
 203         border: 0 solid #dfdfdf;
 204         overflow: hidden;
 205 }
 206
 207 .media-toolbar-primary {
 208         float: left;
 209         height: 100%;
 210 }
 211
 212 .media-toolbar-secondary {
 213         float: right;
 214         height: 100%;
 215 }
 216
 217 .media-toolbar-primary > .media-button,
 218 .media-toolbar-primary > .media-button-group {
 219         margin-right: 10px;
 220         float: right;
 221         margin-top: 15px;
 222 }
 223
 224 .media-toolbar-secondary > .media-button,
 225 .media-toolbar-secondary > .media-button-group {
 226         margin-left: 10px;
 227         float: right;
 228         margin-top: 15px;
 229 }
 230
 231 /**
 232  * Sidebar
 233  */
 234 .media-sidebar {
 235         position: absolute;
 236         top: 0;
 237         left: 0;
 238         bottom: 0;
 239         width: 267px;
 240         padding: 0 16px 24px;
 241         z-index: 75;
 242         background: #f3f3f3;
 243         border-right: 1px solid #ddd;
 244         overflow: auto;
 245         -webkit-overflow-scrolling: touch;
 246 }
 247
 248 .hide-toolbar .media-sidebar {
 249         bottom: 0;
 250 }
 251
 252 .media-sidebar .sidebar-title {
 253         font-size: 20px;
 254         margin: 0;
 255         padding: 12px 10px 10px;
 256         line-height: 28px;
 257 }
 258
 259 .media-sidebar .sidebar-content {
 260         padding: 0 10px;
 261         margin-bottom: 130px;
 262 }
 263
 264 .media-sidebar .search {
 265         display: block;
 266         width: 100%;
 267 }
 268
 269 .media-sidebar h3 {
 270         position: relative;
 271         font-weight: bold;
 272         text-transform: uppercase;
 273         font-size: 12px;
 274         color: #666;
 275         margin: 24px 0 8px;
 276 }
 277
 278 .media-sidebar .setting {
 279         display: block;
 280         float: right;
 281         width: 100%;
 282         margin: 1px 0;
 283 }
 284
 285 .media-sidebar .setting label {
 286         display: block;
 287 }
 288
 289 .media-sidebar .setting .link-to-custom {
 290         margin: 3px 0;
 291 }
 292
 293 .media-sidebar .setting span {
 294         min-width: 30%;
 295         margin-left: 4%;
 296         font-size: 12px;
 297 }
 298
 299 .media-sidebar .setting select {
 300         max-width: 65%;
 301 }
 302
 303 .media-sidebar .setting input[type="checkbox"],
 304 .media-sidebar .field input[type="checkbox"] {
 305         width: 16px;
 306         float: none;
 307         margin: 8px 3px 0;
 308         padding: 0;
 309 }
 310
 311 .media-sidebar .setting span,
 312 .compat-item label span {
 313         float: right;
 314         min-height: 22px;
 315         padding-top: 8px;
 316         line-height: 16px;
 317         text-align: left;
 318         font-weight: normal;
 319         color: #666;
 320 }
 321
 322 .media-sidebar .setting input,
 323 .media-sidebar .setting textarea {
 324         margin: 1px;
 325         width: 65%;
 326         float: left;
 327 }
 328
 329 .media-sidebar .setting textarea,
 330 .compat-item .field textarea {
 331         height: 62px;
 332         resize: vertical;
 333 }
 334
 335 .media-sidebar select {
 336         margin-top: 3px;
 337 }
 338
 339 .compat-item {
 340         float: right;
 341         width: 100%;
 342         overflow: hidden;
 343 }
 344
 345 .compat-item table {
 346         width: 100%;
 347         table-layout: fixed;
 348         border-spacing: 0;
 349         border: 0;
 350 }
 351
 352 .compat-item tr {
 353         padding: 2px 0;
 354         display: block;
 355         overflow: hidden;
 356 }
 357
 358 .compat-item .label,
 359 .compat-item .field {
 360         display: block;
 361         margin: 0;
 362         padding: 0;
 363 }
 364
 365 .compat-item .label {
 366         min-width: 30%;
 367         margin-left: 4%;
 368         float: right;
 369         text-align: left;
 370 }
 371
 372 .compat-item .label span {
 373         display: block;
 374         width: 100%;
 375 }
 376
 377 .compat-item .field {
 378         float: left;
 379         width: 66%;
 380 }
 381
 382 .compat-item .field input {
 383         width: 100%;
 384         margin: 0;
 385 }
 386
 387
 388 /**
 389  * Menu
 390  */
 391 .media-menu {
 392         position: absolute;
 393         top: 0;
 394         right: 0;
 395         left: 0;
 396         bottom: 0;
 397         margin: 0;
 398         padding: 16px 0;
 399         background: #f3f3f3;
 400         border-left-width: 1px;
 401         border-left-style: solid;
 402         border-left-color: #ccc;
 403         -webkit-user-select: none;
 404         -moz-user-select: none;
 405         -ms-user-select: none;
 406         user-select: none;
 407 }
 408
 409 .media-menu > a {
 410         display: block;
 411         position: relative;
 412         padding: 8px 20px;
 413         margin: 0;
 414         line-height: 18px;
 415         font-size: 14px;
 416         color: #0074a2;
 417         text-decoration: none;
 418 }
 419
 420 .media-menu > a:hover {
 421         color: #21759B;
 422         background: rgba( 0, 0, 0, 0.04 );
 423 }
 424
 425 .media-menu > a:active {
 426         outline: none;
 427 }
 428
 429 .media-menu .active,
 430 .media-menu .active:hover {
 431         color: #222;
 432         font-weight: bold;
 433 }
 434
 435 .media-menu .separator {
 436         height: 0;
 437         margin: 12px 20px;
 438         padding: 0;
 439         border-top: 1px solid #ddd;
 440 }
 441
 442 /**
 443  * Menu
 444  */
 445 .media-router {
 446         position: relative;
 447         padding: 0 6px;
 448         margin: 0;
 449         clear: both;
 450         -webkit-user-select: none;
 451         -moz-user-select: none;
 452         -ms-user-select: none;
 453         user-select: none;
 454 }
 455
 456 .media-router > a {
 457         position: relative;
 458         float: right;
 459         padding: 8px 10px 9px;
 460         margin: 0;
 461         height: 18px;
 462         line-height: 18px;
 463         font-size: 14px;
 464         text-decoration: none;
 465 }
 466
 467 .media-router > a:last-child {
 468         border-left: 0;
 469 }
 470
 471 .media-router > a:active,
 472 .media-router > a:focus {
 473         outline: none;
 474 }
 475
 476 .media-router .active,
 477 .media-router .active:hover {
 478         color: #333;
 479 }
 480
 481 .media-router .active,
 482 .media-router > a.active:last-child {
 483         margin: -1px -1px 0;
 484         background: #fff;
 485         border: 1px solid #ddd;
 486         border-bottom: none;
 487 }
 488
 489 .media-router .active:after {
 490         display: none;
 491 }
 492
 493 /**
 494  * Frame
 495  */
 496 .media-frame {
 497         overflow: hidden;
 498         position: absolute;
 499         top: 0;
 500         right: 0;
 501         left: 0;
 502         bottom: 0;
 503 }
 504
 505 .media-frame-menu {
 506         position: absolute;
 507         top: 0;
 508         right: 0;
 509         bottom: 0;
 510         width: 199px;
 511         z-index: 150;
 512 }
 513
 514 .media-frame-title {
 515         position: absolute;
 516         top: 0;
 517         right: 200px;
 518         left: 0;
 519         height: 56px;
 520         z-index: 200;
 521 }
 522
 523 .media-frame-router {
 524         position: absolute;
 525         top: 56px;
 526         right: 200px;
 527         left: 0;
 528         height: 36px;
 529         z-index: 200;
 530 }
 531
 532 .media-frame-content {
 533         position: absolute;
 534         top: 90px;
 535         right: 200px;
 536         left: 0;
 537         bottom: 61px;
 538         height: auto;
 539         width: auto;
 540         margin: 0;
 541         overflow: auto;
 542         background: #fff;
 543         border-top: 1px solid #ddd;
 544         border-bottom: 1px solid #ddd;
 545 }
 546
 547 .media-frame-toolbar {
 548         position: absolute;
 549         right: 200px;
 550         left: 0;
 551         bottom: 0;
 552         height: 60px;
 553         z-index: 100;
 554 }
 555
 556 .media-frame.hide-menu .media-frame-title,
 557 .media-frame.hide-menu .media-frame-router,
 558 .media-frame.hide-menu .media-frame-toolbar,
 559 .media-frame.hide-menu .media-frame-content {
 560         right: 0;
 561 }
 562
 563 .media-frame.hide-menu .media-frame-menu {
 564         right: -200px;
 565 }
 566
 567 .media-frame.hide-toolbar .media-frame-content {
 568         bottom: 0;
 569 }
 570
 571 .media-frame.hide-toolbar .media-frame-toolbar {
 572         bottom: -61px;
 573 }
 574
 575 .media-frame.hide-router .media-frame-content {
 576         top: 56px;
 577 }
 578
 579 .media-frame.hide-router .media-frame-router {
 580         display: none;
 581 }
 582
 583 .media-frame.hide-router .media-frame-title {
 584         border-bottom: 1px solid #dfdfdf;
 585         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 586 }
 587
 588 .media-frame .media-toolbar .add-to-gallery {
 589         display: none;
 590 }
 591
 592 .media-frame-title h1 {
 593         padding: 0 16px;
 594         font-size: 22px;
 595         line-height: 60px;
 596         margin: 0;
 597 }
 598
 599 /**
 600  * Iframes
 601  */
 602 .media-frame .media-iframe {
 603         overflow: hidden;
 604 }
 605
 606 .media-frame .media-iframe,
 607 .media-frame .media-iframe iframe {
 608         height: 100%;
 609         width: 100%;
 610         border: 0;
 611 }
 612
 613 /**
 614  * Attachment Browser Filters
 615  */
 616 .media-frame select.attachment-filters {
 617         margin-top: 11px;
 618         margin-left: 10px;
 619 }
 620
 621 /**
 622  * Search
 623  */
 624 .media-frame .search {
 625         margin-top: 11px;
 626         padding: 4px;
 627         line-height: 18px;
 628         font-size: 13px;
 629         color: #464646;
 630         font-family: "Open Sans", sans-serif;
 631         -webkit-appearance: none;
 632 }
 633
 634 .media-toolbar-secondary .search {
 635         margin-left: 16px;
 636 }
 637
 638 /**
 639  * Attachments
 640  */
 641 .attachments {
 642         margin: 0;
 643         padding-left: 16px;
 644         -webkit-overflow-scrolling: touch;
 645 }
 646
 647 /**
 648  * Attachment
 649  */
 650 .attachment {
 651         position: relative;
 652         float: right;
 653
 654         padding: 0;
 655         margin: 0 10px 20px;
 656         color: #464646;
 657         list-style: none;
 658         text-align: center;
 659
 660         -webkit-user-select: none;
 661         -moz-user-select:    none;
 662         -ms-user-select:     none;
 663         -o-user-select:      none;
 664         user-select:         none;
 665 }
 666
 667 .selected.attachment {
 668         box-shadow:
 669                 0 0 0 1px #fff,
 670                 0 0 0 3px #ccc;
 671 }
 672
 673 .attachment-preview {
 674         position: relative;
 675         width: 199px;
 676         height: 199px;
 677         box-shadow:
 678                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 679                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 680         background: #eee;
 681         cursor: pointer;
 682 }
 683
 684 .attachment .icon {
 685         margin: 0 auto;
 686         overflow: hidden;
 687         padding-top: 20%;
 688 }
 689
 690 .attachment .thumbnail {
 691         display: block;
 692         position: absolute;
 693         top: 0;
 694         right: 0;
 695         margin: 0 auto;
 696         overflow: hidden;
 697         max-width: 100%;
 698         max-height: 100%;
 699 }
 700
 701 .attachment-preview .thumbnail:after {
 702         content: '';
 703         display: block;
 704         position: absolute;
 705         top: 0;
 706         right: 0;
 707         left: 0;
 708         bottom: 0;
 709         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 710         overflow: hidden;
 711 }
 712
 713 /* @noflip */
 714 .attachment .thumbnail img {
 715         top: 0;
 716         left: 0;
 717 }
 718
 719 /* @noflip */
 720 .attachment .thumbnail .centered {
 721         position: absolute;
 722         top: 0;
 723         left: 0;
 724         width: 100%;
 725         height: 100%;
 726         -webkit-transform: translate( 50%, 50% );
 727         -moz-transform:    translate( 50%, 50% );
 728         -ms-transform:     translate( 50%, 50% );
 729         -o-transform:      translate( 50%, 50% );
 730         transform:         translate( 50%, 50% );
 731 }
 732
 733 .attachment .thumbnail .centered img {
 734         -webkit-transform: translate( -50%, -50% );
 735         -moz-transform:    translate( -50%, -50% );
 736         -ms-transform:     translate( -50%, -50% );
 737         -o-transform:      translate( -50%, -50% );
 738         transform:         translate( -50%, -50% );
 739 }
 740
 741 .attachment .filename {
 742         position: absolute;
 743         right: 0;
 744         left: 0;
 745         bottom: 0;
 746         overflow: hidden;
 747         max-height: 100%;
 748
 749         word-wrap: break-word;
 750         text-align: center;
 751         font-weight: bold;
 752         background: rgba( 255, 255, 255, 0.8 );
 753         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 754 }
 755
 756 .attachment .filename div {
 757         padding: 5px 10px;
 758 }
 759
 760 .attachment-preview .thumbnail {
 761         width: 199px;
 762         height: 199px;
 763 }
 764
 765 .attachment .thumbnail img {
 766         position: absolute;
 767 }
 768
 769 .attachment .close {
 770         display: none;
 771         position: absolute;
 772         top: 5px;
 773         left: 5px;
 774         height: 22px;
 775         width: 22px;
 776         padding: 0;
 777         font-size: 20px;
 778         line-height: 20px;
 779         text-align: center;
 780         text-decoration: none;
 781         color: #464646;
 782         background-color: #fff;
 783         background-position: -96px 4px;
 784         border-width: 0;
 785         border-radius: 3px;
 786         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 787 }
 788
 789 .attachment .close:hover {
 790         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 791 }
 792
 793 .attachment:hover .close {
 794         display: block;
 795 }
 796
 797 .attachment .check {
 798         display: none;
 799         height: 24px;
 800         width: 24px;
 801         position: absolute;
 802         top: -6px;
 803         left: -6px;
 804         outline: none;
 805         background: #eee;
 806         box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 807 }
 808
 809 .attachment .check div {
 810         background-position: -1px 0;
 811         height: 15px;
 812         width: 15px;
 813         margin: 5px;
 814 }
 815
 816 .attachment .check:hover div {
 817         background-position: -40px 0;
 818 }
 819
 820 .attachment.selected .check {
 821         display: block;
 822 }
 823
 824 .attachment.details {
 825         box-shadow: 0 0 0 1px #fff,
 826                                 0 0 0 5px #1e8cbe;
 827 }
 828
 829 .attachment.details .check {
 830         background-color: #1e8cbe;
 831         box-shadow: 0 0 0 1px #fff,
 832                                 0 0 0 2px #1e8cbe;
 833 }
 834
 835 .attachment.details .check div {
 836         background-position: -21px 0;
 837 }
 838
 839 .attachment.details .check:hover div {
 840         background-position: -60px 0;
 841 }
 842
 843 .media-frame .attachment .describe {
 844         position: relative;
 845         display: block;
 846         width: 100%;
 847         margin: -1px 0 0;
 848         padding: 8px;
 849         font-size: 12px;
 850         border-radius: 0;
 851 }
 852
 853 /**
 854  * Attachments Browser
 855  */
 856 .media-frame .attachments-browser {
 857         position: relative;
 858         width: 100%;
 859         height: 100%;
 860         overflow: hidden;
 861 }
 862
 863 .attachments-browser .media-toolbar {
 864         left: 300px;
 865         height: 50px;
 866 }
 867
 868 .attachments-browser .media-toolbar-primary > .media-button,
 869 .attachments-browser .media-toolbar-primary > .media-button-group,
 870 .attachments-browser .media-toolbar-secondary > .media-button,
 871 .attachments-browser .media-toolbar-secondary > .media-button-group {
 872         margin-top: 10px;
 873 }
 874
 875 .attachments-browser .attachments,
 876 .attachments-browser .uploader-inline {
 877         position: absolute;
 878         top: 50px;
 879         right: 0;
 880         left: 300px;
 881         bottom: 0;
 882         overflow: auto;
 883 }
 884
 885 .attachments-browser .instructions {
 886         display: inline-block;
 887         margin-top: 16px;
 888         line-height: 18px;
 889         font-size: 13px;
 890         color: #666;
 891 }
 892
 893 /**
 894  * Progress Bar
 895  */
 896 .media-progress-bar {
 897         position: relative;
 898         height: 10px;
 899         width: 70%;
 900         margin: 10px auto;
 901         border-radius: 10px;
 902         background: #dfdfdf;
 903         background: rgba( 0, 0, 0, 0.1 );
 904 }
 905
 906 .media-progress-bar div {
 907         height: 10px;
 908         min-width: 20px;
 909         width: 0;
 910         background: #1e8cbe;
 911         border-radius: 10px;
 912         -webkit-transition: width 300ms;
 913         -moz-transition:    width 300ms;
 914         -ms-transition:     width 300ms;
 915         -o-transition:      width 300ms;
 916         transition:         width 300ms;
 917 }
 918
 919 .media-uploader-status .media-progress-bar {
 920         display: none;
 921         width: 100%;
 922 }
 923
 924 .uploading.media-uploader-status .media-progress-bar {
 925         display: block;
 926 }
 927
 928 .attachment-preview .media-progress-bar {
 929         position: absolute;
 930         top: 50%;
 931         right: 15%;
 932         width: 70%;
 933         margin: -5px 0 0 0;
 934 }
 935
 936 .media-uploader-status {
 937         position: relative;
 938         margin: 0 auto;
 939         padding-bottom: 10px;
 940         max-width: 400px;
 941 }
 942
 943 .media-sidebar .media-uploader-status {
 944         border-bottom: 1px solid #dfdfdf;
 945         box-shadow: 0 1px 0 #fff;
 946 }
 947
 948 .uploader-inline .media-uploader-status h3 {
 949         display: none;
 950 }
 951
 952 .media-uploader-status .upload-details {
 953         display: none;
 954         font-size: 12px;
 955         color: #666;
 956 }
 957
 958 .uploading.media-uploader-status .upload-details {
 959         display: block;
 960 }
 961
 962 .media-uploader-status .upload-detail-separator {
 963         padding: 0 4px;
 964 }
 965
 966 .media-uploader-status .upload-count {
 967         color: #464646;
 968 }
 969
 970 .media-uploader-status .upload-dismiss-errors,
 971 .media-uploader-status .upload-errors {
 972         display: none;
 973 }
 974
 975 .errors.media-uploader-status .upload-dismiss-errors,
 976 .errors.media-uploader-status .upload-errors {
 977         display: block;
 978 }
 979
 980 .media-uploader-status .upload-dismiss-errors {
 981         text-decoration: none;
 982 }
 983
 984 .media-sidebar .media-uploader-status .upload-dismiss-errors {
 985         position: absolute;
 986         top: 0;
 987         left: 0;
 988 }
 989
 990 .upload-errors .upload-error {
 991         margin: 8px auto 0 auto;
 992         padding: 8px;
 993         border: 1px #c00 solid;
 994         background: #ffebe8;
 995         border-radius: 3px;
 996 }
 997
 998 .upload-errors .upload-error-label {
 999         padding: 2px 4px;
1000         margin-left: 8px;
1001         font-weight: bold;
1002         color: #fff;
1003         background: #e00;
1004         background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
1005         background-image: -webkit-linear-gradient(top, #e00, #a00);
1006         background-image:    -moz-linear-gradient(top, #e00, #a00);
1007         background-image:      -o-linear-gradient(top, #e00, #a00);
1008         background-image:   linear-gradient(to bottom, #e00, #a00);
1009         border-radius: 3px;
1010 }
1011
1012 .upload-errors .upload-error-message {
1013         display: block;
1014         padding-top: 8px;
1015         color: #b44;
1016         word-wrap: break-word;
1017 }
1018
1019 .uploader-window {
1020         position: fixed;
1021         top: 0;
1022         right: 0;
1023         left: 0;
1024         bottom: 0;
1025         background: rgba( 0, 86, 132, 0.9 );
1026
1027         z-index: 250000;
1028         display: none;
1029         text-align: center;
1030         opacity: 0;
1031
1032         -webkit-transition: opacity 250ms;
1033         -moz-transition:    opacity 250ms;
1034         -ms-transition:     opacity 250ms;
1035         -o-transition:      opacity 250ms;
1036         transition:         opacity 250ms;
1037 }
1038
1039 .uploader-window-content {
1040         position: absolute;
1041         top: 10px;
1042         right: 10px;
1043         left: 10px;
1044         bottom: 10px;
1045         border: 1px dashed #fff;
1046 }
1047
1048 .uploader-window h3 {
1049         margin: -0.5em 0 0;
1050         position: absolute;
1051         top: 50%;
1052         right: 0;
1053         left: 0;
1054         -webkit-transform: translateY( -50% );
1055         -moz-transform:    translateY( -50% );
1056         -ms-transform:     translateY( -50% );
1057         -o-transform:      translateY( -50% );
1058         transform:         translateY( -50% );
1059
1060         font-size: 40px;
1061         color: #fff;
1062         padding: 0;
1063 }
1064
1065 .uploader-window .media-progress-bar {
1066         margin-top: 20px;
1067         max-width: 300px;
1068         background: transparent;
1069         border-color: #fff;
1070         display: none;
1071 }
1072
1073 .uploader-window .media-progress-bar div {
1074         background: #fff;
1075 }
1076
1077 .uploading .uploader-window .media-progress-bar {
1078         display: block;
1079 }
1080
1081 .media-frame .uploader-inline {
1082         margin: 20px;
1083         padding: 20px;
1084         text-align: center;
1085 }
1086
1087 .uploader-inline-content {
1088         position: absolute;
1089         top: 30%;
1090         right: 0;
1091         left: 0;
1092 }
1093
1094 .uploader-inline-content .upload-ui {
1095         margin: 4em 0;
1096 }
1097
1098 .uploader-inline-content .post-upload-ui {
1099         margin-bottom: 2em;
1100 }
1101
1102 .uploader-inline .has-upload-message .upload-ui {
1103         margin: 0 0 4em;
1104 }
1105
1106 .uploader-inline h3 {
1107         font-size: 20px;
1108         line-height: 28px;
1109         font-weight: 400;
1110         margin-bottom: 1.6em;
1111 }
1112
1113 .uploader-inline .has-upload-message .upload-instructions {
1114         font-size: 14px;
1115         color: #464646;
1116         font-weight: normal;
1117 }
1118
1119 .uploader-inline .drop-instructions {
1120         display: none;
1121 }
1122
1123 .supports-drag-drop .uploader-inline .drop-instructions {
1124         display: block;
1125 }
1126
1127 .uploader-inline p {
1128         font-size: 12px;
1129 }
1130
1131 .uploader-inline .media-progress-bar {
1132         display: none;
1133 }
1134
1135 .uploading.uploader-inline .media-progress-bar {
1136         display: block;
1137 }
1138
1139 .uploader-inline .browser {
1140         display: inline-block !important;
1141 }
1142
1143 /**
1144  * Selection
1145  */
1146 .media-selection {
1147         position: absolute;
1148         top: 0;
1149         right: 0;
1150         left: 350px;
1151         height: 60px;
1152         padding: 0 16px 0 0;
1153         overflow: hidden;
1154         white-space: nowrap;
1155 }
1156
1157 .media-selection .selection-info {
1158         display: inline-block;
1159         font-size: 12px;
1160         height: 60px;
1161         margin-left: 10px;
1162         vertical-align: top;
1163 }
1164
1165 .media-selection.empty,
1166 .media-selection.editing {
1167         display: none;
1168 }
1169
1170 .media-selection.one .edit-selection {
1171         display: none;
1172 }
1173
1174 .media-selection .count {
1175         display: block;
1176         padding-top: 12px;
1177         font-size: 14px;
1178         line-height: 20px;
1179         font-weight: bold;
1180 }
1181
1182 .media-selection .selection-info a {
1183         display: block;
1184         float: right;
1185         padding: 1px 8px;
1186         margin: 1px -8px 1px 8px;
1187         line-height: 16px;
1188         text-decoration: none;
1189         border-left: 1px solid #dfdfdf;
1190         color: #21759B;
1191 }
1192
1193 .media-selection .selection-info a:hover {
1194         background: #21759B;
1195         color: #fff;
1196         border-color: transparent;
1197 }
1198
1199 .media-selection .selection-info a:last-child {
1200         border-left: 0;
1201         margin-left: 0;
1202 }
1203
1204 .media-selection .selection-info .clear-selection {
1205         color: red;
1206 }
1207
1208 .media-selection .selection-info .clear-selection:hover {
1209         background: red;
1210 }
1211
1212 .media-selection .selection-view {
1213         display: inline-block;
1214         vertical-align: top;
1215 }
1216
1217 .media-selection .attachments {
1218         display: inline-block;
1219         height: 48px;
1220         margin-top: 5px;
1221         overflow: hidden;
1222         vertical-align: top;
1223 }
1224
1225 .media-selection .attachment .icon {
1226         width: 50%;
1227 }
1228
1229 .attachment.selection.selected {
1230         box-shadow: none;
1231 }
1232
1233 .attachment.selection.details {
1234         box-shadow:
1235                 0 0 0 1px #fff,
1236                 0 0 0 4px #1e8cbe;
1237 }
1238
1239 .media-selection .attachment.selection.details {
1240         box-shadow:
1241                 0 0 0 1px #fff,
1242                 0 0 0 3px #1e8cbe;
1243 }
1244
1245 .media-selection:after {
1246         content: '';
1247         display: block;
1248         position: absolute;
1249         top: 0;
1250         left: 0;
1251         bottom: 0;
1252         width: 25px;
1253         background-image: -webkit-gradient(linear, left top, right top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1254         background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1255         background-image:    -moz-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1256         background-image:      -o-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1257         background-image:   linear-gradient(to right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1258 }
1259
1260 .media-selection .attachment .filename {
1261         display: none;
1262 }
1263
1264 /**
1265  * Spinner
1266  */
1267
1268 .media-frame .spinner {
1269         background: url('../images/spinner.gif') no-repeat;
1270         background-size: 20px 20px;
1271         display: none;
1272         opacity: 0.7;
1273         filter: alpha(opacity=70);
1274         width: 20px;
1275         height: 20px;
1276         margin: 0;
1277 }
1278
1279 .media-sidebar .settings-save-status {
1280         background: #f5f5f5;
1281         float: left;
1282         text-transform: none;
1283         z-index: 10;
1284 }
1285
1286 .media-sidebar .settings-save-status .spinner {
1287         margin: 0 5px 0;
1288 }
1289
1290 .media-sidebar .settings-save-status .saved {
1291         float: left;
1292         display: none;
1293 }
1294
1295 .media-sidebar .save-waiting .settings-save-status .spinner,
1296 .media-sidebar .save-complete .settings-save-status .saved {
1297         display: block;
1298 }
1299
1300 /**
1301  * Attachment Details
1302  */
1303 .attachment-details {
1304         position: relative;
1305         overflow: auto;
1306 }
1307
1308 .attachment-info {
1309         overflow: hidden;
1310         min-height: 60px;
1311         margin-bottom: 16px;
1312         line-height: 18px;
1313         color: #666;
1314         border-bottom: 1px solid #e5e5e5;
1315         box-shadow: 0 1px 0 #fff;
1316         padding-bottom: 11px;
1317 }
1318
1319 .attachment-info .filename {
1320         font-weight: bold;
1321         color: #464646;
1322         word-wrap: break-word;
1323 }
1324
1325 .attachment-info .thumbnail {
1326         position: relative;
1327         float: right;
1328         max-width: 120px;
1329         max-height: 120px;
1330         margin-top: 5px;
1331         margin-left: 10px;
1332         margin-bottom: 5px;
1333 }
1334
1335 .uploading .attachment-info .thumbnail {
1336         width: 120px;
1337         height: 80px;
1338         box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1339 }
1340
1341 .uploading .attachment-info .media-progress-bar {
1342         margin-top: 35px;
1343 }
1344
1345 .attachment-info .thumbnail:after {
1346         content: '';
1347         display: block;
1348         position: absolute;
1349         top: 0;
1350         right: 0;
1351         left: 0;
1352         bottom: 0;
1353         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1354         overflow: hidden;
1355 }
1356
1357 .attachment-info .thumbnail img {
1358         display: block;
1359         max-width: 120px;
1360         max-height: 120px;
1361         margin: 0 auto;
1362 }
1363
1364 .attachment-info .details {
1365         float: right;
1366         font-size: 12px;
1367         max-width: 100%;
1368 }
1369
1370 .attachment-info .edit-attachment,
1371 .attachment-info .refresh-attachment,
1372 .attachment-info .delete-attachment {
1373         display: block;
1374         text-decoration: none;
1375         white-space: nowrap;
1376 }
1377
1378 .attachment-info .refresh-attachment,
1379 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1380         display: none;
1381 }
1382
1383 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1384 .attachment-info .edit-attachment {
1385         display: block;
1386 }
1387
1388 .attachment-info .delete-attachment {
1389         color: #bc0b0b;
1390 }
1391
1392 .attachment-info .delete-attachment:hover {
1393         color: red;
1394 }
1395
1396 /**
1397  * Attachment Display Settings
1398  */
1399 .attachment-display-settings {
1400         width: 100%;
1401         float: right;
1402         overflow: hidden;
1403 }
1404
1405 .attachment-display-settings h4 {
1406         margin: 1.4em 0 0.4em;
1407 }
1408
1409 .gallery-settings {
1410         overflow: hidden;
1411 }
1412
1413 /**
1414  * Embed from URL
1415  */
1416 .embed-url {
1417         display: block;
1418         position: relative;
1419         padding: 16px;
1420         margin: 0;
1421         z-index: 250;
1422         background: #fff;
1423         font-size: 18px;
1424 }
1425
1426 .media-frame .embed-url input {
1427         font-size: 18px;
1428         padding: 12px 14px;
1429         width: 100%;
1430         min-width: 200px;
1431         box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1432 }
1433
1434 .media-frame .embed-url .spinner {
1435         position: absolute;
1436         top: 16px;
1437         left: 26px;
1438 }
1439
1440 .media-frame .embed-loading .embed-url .spinner {
1441         display: block;
1442 }
1443
1444 .embed-link-settings,
1445 .embed-image-settings {
1446         position: absolute;
1447         top: 60px;
1448         right: 0;
1449         left: 0;
1450         bottom: 0;
1451         padding: 16px 16px 32px;
1452         overflow: auto;
1453 }
1454
1455 .media-embed .thumbnail {
1456         max-width: 100%;
1457         max-height: 200px;
1458         position: relative;
1459         float: right;
1460 }
1461
1462 .media-embed .thumbnail img {
1463         max-height: 200px;
1464         display: block;
1465 }
1466
1467 .media-embed .thumbnail:after {
1468         content: '';
1469         display: block;
1470         position: absolute;
1471         top: 0;
1472         right: 0;
1473         left: 0;
1474         bottom: 0;
1475         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1476         overflow: hidden;
1477 }
1478
1479 .media-embed .setting {
1480         width: 100%;
1481         margin-top: 10px;
1482         float: right;
1483         display: block;
1484         clear: both;
1485 }
1486
1487 .media-embed .setting span {
1488         display: block;
1489         width: 200px;
1490         font-size: 13px;
1491         line-height: 24px;
1492         color: #666;
1493 }
1494
1495 .media-embed .setting .button-group {
1496         margin: 2px 0;
1497 }
1498
1499 .media-embed .setting input,
1500 .media-embed .setting textarea {
1501         display: block;
1502         width: 100%;
1503         max-width: 400px;
1504         margin: 1px 0;
1505 }
1506
1507 /**
1508  * IE7 Fixes
1509  */
1510 .ie7 .media-frame .attachments-browser {
1511         position: static;
1512 }
1513
1514 .ie7 .media-frame .embed-url input {
1515         margin-top: 4px;
1516         width: 90%;
1517 }
1518
1519 .ie7 .compat-item {
1520         width: 99%;
1521 }
1522
1523 .ie7 .attachment-display-settings {
1524         width: auto;
1525 }
1526
1527 .ie7 .attachment-preview,
1528 .ie7 .attachment-preview .thumbnail {
1529         width: 120px;
1530         height: 120px;
1531 }
1532
1533 .ie7 .media-frame .attachment .describe {
1534         width: 102px;
1535 }
1536
1537 .ie7 .media-sidebar .setting select {
1538         max-width: 55%;
1539 }
1540
1541 .ie7 .media-sidebar .setting input,
1542 .ie7 .media-sidebar .setting textarea {
1543         width: 55%;
1544 }
1545
1546 .ie7 .media-sidebar .setting .link-to-custom {
1547         float: right;
1548 }
1549
1550 /**
1551  * Localization
1552  */
1553 .rtl .media-modal,
1554 .rtl .media-frame,
1555 .rtl .media-frame .search,
1556 .rtl .media-frame input[type="text"],
1557 .rtl .media-frame input[type="password"],
1558 .rtl .media-frame input[type="number"],
1559 .rtl .media-frame input[type="search"],
1560 .rtl .media-frame input[type="email"],
1561 .rtl .media-frame input[type="url"],
1562 .rtl .media-frame textarea,
1563 .rtl .media-frame select {
1564         font-family: Tahoma, sans-serif;
1565 }
1566
1567 :lang(he-il) .rtl .media-modal,
1568 :lang(he-il) .rtl .media-frame,
1569 :lang(he-il) .rtl .media-frame .search,
1570 :lang(he-il) .rtl .media-frame input[type="text"],
1571 :lang(he-il) .rtl .media-frame input[type="password"],
1572 :lang(he-il) .rtl .media-frame input[type="number"],
1573 :lang(he-il) .rtl .media-frame input[type="search"],
1574 :lang(he-il) .rtl .media-frame input[type="email"],
1575 :lang(he-il) .rtl .media-frame input[type="url"],
1576 :lang(he-il) .rtl .media-frame textarea,
1577 :lang(he-il) .rtl .media-frame select {
1578         font-family: Arial, sans-serif;
1579 }
1580
1581
1582
1583
1584 @media only screen and (max-width: 960px) {
1585         .media-frame-content .media-toolbar-primary .search,
1586         .media-frame-content .media-toolbar-secondary .attachment-filters {
1587                 max-width: 120px;
1588         }
1589 }
1590
1591 /**
1592  * Responsive layout
1593  */
1594 @media only screen and (max-width: 900px) {
1595         .media-frame-menu {
1596                 width: 139px;
1597         }
1598
1599         .media-menu > a {
1600                 padding: 4px 5px;
1601         }
1602
1603         .media-frame-title,
1604         .media-frame-router,
1605         .media-frame-content,
1606         .media-frame-toolbar {
1607                 right: 140px;
1608         }
1609
1610         .media-sidebar {
1611                 width: 159px;
1612                 padding: 0 10px 24px;
1613         }
1614
1615         .attachments-browser .attachments,
1616         .attachments-browser .uploader-inline,
1617         .attachments-browser .media-toolbar {
1618                 left: 180px;
1619         }
1620
1621         .media-sidebar .setting input,
1622         .media-sidebar .setting textarea,
1623         .media-sidebar .setting span,
1624         .compat-item label span {
1625                 float: none;
1626         }
1627
1628         .media-sidebar .setting span,
1629         .compat-item label span {
1630                 text-align: inherit;
1631                 display: block;
1632                 min-height: 16px;
1633                 margin: 0;
1634                 padding: 8px 2px 0;
1635         }
1636
1637         .media-sidebar .setting input,
1638         .media-sidebar .setting textarea,
1639         .media-sidebar .setting select {
1640                 width: 98%;
1641                 max-width: none;
1642         }
1643
1644         .media-sidebar .setting select.columns {
1645                 width: auto;
1646         }
1647
1648         .media-frame input,
1649         .media-frame textarea,
1650         .media-frame .search {
1651                 padding: 3px 6px;
1652         }
1653
1654         .media-frame-content .attachment .icon {
1655                 top: 40%;
1656         }
1657
1658         .media-selection {
1659                 min-width: 120px;
1660         }
1661
1662         .media-selection:after {
1663                 background: none;
1664         }
1665
1666         .media-selection .attachments {
1667                 display: none;
1668         }
1669
1670         .media-menu .separator {
1671                 margin: 12px 10px;
1672         }
1673
1674         .media-modal-close {
1675                 left: 10px;
1676         }
1677
1678         /* Text inputs need to be 16px, or they force zooming on iOS */
1679         .media-frame input[type="text"],
1680         .media-frame input[type="password"],
1681         .media-frame input[type="number"],
1682         .media-frame input[type="search"],
1683         .media-frame input[type="email"],
1684         .media-frame input[type="url"],
1685         .media-frame textarea,
1686         .media-frame select {
1687                 font-size: 16px;
1688         }
1689 }
1690
1691 /* Responsive on portrait and landscape */
1692 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1693
1694         /* Media tabs on the top */
1695         .media-frame-content .media-toolbar .instructions {
1696                 display: none;
1697         }
1698
1699         .media-frame-menu {
1700                 width: auto;
1701                 bottom: auto;
1702                 left: 0;
1703                 height: 60px;
1704         }
1705
1706         .media-menu {
1707                 border-left: none;
1708                 position: relative;
1709                 border-bottom: 1px solid #dddddd;
1710                 overflow: hidden;
1711                 padding: 10px 10px 10px 0;
1712         }
1713
1714         .media-menu a {
1715                 float: right;
1716                 width: 42%;
1717                 white-space: nowrap;
1718                 text-overflow: ellipsis;
1719                 overflow: hidden;
1720         }
1721
1722         .media-frame-title {
1723                 display: none;
1724         }
1725
1726         .media-frame-toolbar {
1727                 position: absolute;
1728                 bottom: 0px;
1729                 right: 0;
1730                 left: 0;
1731                 background: #FFF;
1732                 border-top: 1px solid #DEDEDE;
1733         }
1734
1735         .media-toolbar {
1736                 position: relative;
1737         }
1738
1739         .media-frame {
1740                 overflow: hidden;
1741         }
1742
1743         .attachments-browser .attachments {
1744                 top: 42px;
1745         }
1746
1747         .attachment-details h3 {
1748                 margin-top: 45px;
1749         }
1750
1751         /* Shorten right-side links so they don't overlap the close button */
1752         .media-menu a:nth-child(2),
1753         .media-menu a:last-child {
1754                 width: 40%;
1755         }
1756
1757         .media-menu .separator {
1758                 display: none;
1759         }
1760
1761         .media-frame-title {
1762                 top: 72px;
1763                 right: auto;
1764                 height: auto;
1765         }
1766
1767         .media-frame-title h1 {
1768                 line-height: 3;
1769                 font-size: 18px;
1770         }
1771
1772         .media-frame-router {
1773                 top: 84px;
1774                 right: 0;
1775         }
1776
1777         .media-frame-content {
1778                 right: 0;
1779                 top: 118px;
1780         }
1781
1782         .media-frame .attachments-browser {
1783                 padding-bottom: 300px;
1784         }
1785
1786         .media-sidebar {
1787                 border-bottom: 1px solid #dddddd;
1788         }
1789
1790         .media-modal {
1791                 width: auto;
1792         }
1793
1794         .media-toolbar-primary, .media-toolbar-secondary {
1795                 height: auto;
1796         }
1797
1798         .uploader-inline h3 {
1799                 margin: 0 0 .8em 0;
1800         }
1801
1802         .uploader-inline-content {
1803                 top: auto;
1804         }
1805
1806         .uploader-inline-content .upload-ui {
1807                 margin: 0;
1808         }
1809
1810         .attachments-browser .attachments, .attachments-browser .uploader-inline {
1811                 position: relative;
1812                 margin-left: 180px;
1813         }
1814
1815         /* Full-bleed modal */
1816         .media-modal {
1817                 position: fixed;
1818                 top: 0;
1819                 right: 0;
1820                 left: 0;
1821                 bottom: 0;
1822         }
1823
1824         .media-modal-backdrop {
1825                 position: fixed;
1826         }
1827
1828         .attachments-browser .attachment,
1829         .attachments-browser .attachment-preview {
1830                 max-width: 100%;
1831         }
1832
1833         .attachments-browser .media-toolbar-primary input.search {
1834                 max-width: 150px;
1835         }
1836
1837         .uploader-inline-content {
1838                 position: relative;
1839         }
1840
1841         .media-sidebar .setting input[type="checkbox"],
1842         .media-sidebar .field input[type="checkbox"] {
1843                 width: 25px;
1844         }
1845
1846         /* Image From Link */
1847         .embed-link-settings,
1848         .embed-image-settings {
1849                 padding-bottom: 52px;
1850         }
1851
1852         /* Gallery */
1853         .media-frame.hide-router .media-frame-content {
1854                 top: 73px;
1855                 border-top: none;
1856         }
1857
1858         .gallery-settings h3 {
1859                 margin-top: 45px;
1860         }
1861
1862 }
1863
1864 /* Landscape specific header override */
1865 @media screen and (max-height: 400px) {
1866         .media-menu {
1867                 padding: 0 10px 0 0;
1868         }
1869
1870         .media-menu a {
1871                 float: right;
1872                 width: 21%;
1873                 white-space: nowrap;
1874                 text-overflow: ellipsis;
1875                 overflow: hidden;
1876                 padding: 10px inherit;
1877         }
1878
1879         .media-menu a:nth-child(2),
1880         .media-menu a:last-child {
1881                 width: 21%;
1882         }
1883
1884         .media-modal-close {
1885                 top: 2px;
1886         }
1887
1888         .media-frame-router {
1889                 top: 44px;
1890         }
1891
1892         .media-frame-content {
1893                 top: 78px;
1894         }
1895
1896         .attachments-browser .attachments {
1897                 top: 2px;
1898         }
1899
1900         /* Prevent unnecessary scrolling on title input */
1901         .embed-link-settings {
1902                 overflow: visible;
1903         }
1904 }
1905
1906 @media only screen and (max-width: 680px) {
1907         .media-frame-content .media-toolbar .search,
1908         .media-frame-content .media-toolbar .attachment-filters {
1909                 max-width: 85px;
1910         }
1911 }
1912
1913 /**
1914  * HiDPI Displays
1915  */
1916 @media print,
1917   (-o-min-device-pixel-ratio: 5/4),
1918   (-webkit-min-device-pixel-ratio: 1.25),
1919   (min-resolution: 120dpi) {
1920
1921         .media-modal-icon {
1922                 background-image: url(../images/uploader-icons-2x.png);
1923                 background-size: 134px 15px;
1924         }
1925
1926         .media-frame .spinner {
1927                 background-image: url('../images/spinner-2x.gif');
1928         }
1929 }