[Summary view] [Print] [Text view]

   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      left: 30px;
 113      right: 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      left: 0;
 126      right: 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      right: 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      left: 0;
 178      right: 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      left: 0;
 199      right: 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: right;
 209      height: 100%;
 210  }
 211  
 212  .media-toolbar-secondary {
 213      float: left;
 214      height: 100%;
 215  }
 216  
 217  .media-toolbar-primary > .media-button,
 218  .media-toolbar-primary > .media-button-group {
 219      margin-left: 10px;
 220      float: left;
 221      margin-top: 15px;
 222  }
 223  
 224  .media-toolbar-secondary > .media-button,
 225  .media-toolbar-secondary > .media-button-group {
 226      margin-right: 10px;
 227      float: left;
 228      margin-top: 15px;
 229  }
 230  
 231  /**
 232   * Sidebar
 233   */
 234  .media-sidebar {
 235      position: absolute;
 236      top: 0;
 237      right: 0;
 238      bottom: 0;
 239      width: 267px;
 240      padding: 0 16px 24px;
 241      z-index: 75;
 242      background: #f3f3f3;
 243      border-left: 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: left;
 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-right: 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: left;
 314      min-height: 22px;
 315      padding-top: 8px;
 316      line-height: 16px;
 317      text-align: right;
 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: right;
 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: left;
 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-right: 4%;
 368      float: left;
 369      text-align: right;
 370  }
 371  
 372  .compat-item .label span {
 373      display: block;
 374      width: 100%;
 375  }
 376  
 377  .compat-item .field {
 378      float: right;
 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      left: 0;
 395      right: 0;
 396      bottom: 0;
 397      margin: 0;
 398      padding: 16px 0;
 399      background: #f3f3f3;
 400      border-right-width: 1px;
 401      border-right-style: solid;
 402      border-right-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: left;
 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-right: 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      left: 0;
 501      right: 0;
 502      bottom: 0;
 503  }
 504  
 505  .media-frame-menu {
 506      position: absolute;
 507      top: 0;
 508      left: 0;
 509      bottom: 0;
 510      width: 199px;
 511      z-index: 150;
 512  }
 513  
 514  .media-frame-title {
 515      position: absolute;
 516      top: 0;
 517      left: 200px;
 518      right: 0;
 519      height: 56px;
 520      z-index: 200;
 521  }
 522  
 523  .media-frame-router {
 524      position: absolute;
 525      top: 56px;
 526      left: 200px;
 527      right: 0;
 528      height: 36px;
 529      z-index: 200;
 530  }
 531  
 532  .media-frame-content {
 533      position: absolute;
 534      top: 90px;
 535      left: 200px;
 536      right: 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      left: 200px;
 550      right: 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      left: 0;
 561  }
 562  
 563  .media-frame.hide-menu .media-frame-menu {
 564      left: -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-right: 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-right: 16px;
 636  }
 637  
 638  /**
 639   * Attachments
 640   */
 641  .attachments {
 642      margin: 0;
 643      padding-right: 16px;
 644      -webkit-overflow-scrolling: touch;
 645  }
 646  
 647  /**
 648   * Attachment
 649   */
 650  .attachment {
 651      position: relative;
 652      float: left;
 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      left: 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      left: 0;
 707      right: 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      left: 0;
 744      right: 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      right: 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      right: -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      right: 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      left: 0;
 880      right: 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      left: 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      right: 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-right: 8px;
1001      font-weight: bold;
1002      color: #fff;
1003      background: #e00;
1004      background-image: -webkit-gradient(linear, left top, left 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      left: 0;
1023      right: 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      left: 10px;
1043      right: 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      left: 0;
1053      right: 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      left: 0;
1091      right: 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      left: 0;
1150      right: 350px;
1151      height: 60px;
1152      padding: 0 0 0 16px;
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-right: 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: left;
1185      padding: 1px 8px;
1186      margin: 1px 8px 1px -8px;
1187      line-height: 16px;
1188      text-decoration: none;
1189      border-right: 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-right: 0;
1201      margin-right: 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      right: 0;
1251      bottom: 0;
1252      width: 25px;
1253      background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1254      background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1255      background-image:    -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1256      background-image:      -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1257      background-image:   linear-gradient(to left, 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: right;
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: right;
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: left;
1328      max-width: 120px;
1329      max-height: 120px;
1330      margin-top: 5px;
1331      margin-right: 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      left: 0;
1351      right: 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: left;
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: left;
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      right: 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      left: 0;
1449      right: 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: left;
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      left: 0;
1473      right: 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: left;
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: left;
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          left: 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          right: 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          right: 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          right: 0;
1703          height: 60px;
1704      }
1705  
1706      .media-menu {
1707          border-right: none;
1708          position: relative;
1709          border-bottom: 1px solid #dddddd;
1710          overflow: hidden;
1711          padding: 10px 0 10px 10px;
1712      }
1713  
1714      .media-menu a {
1715          float: left;
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          left: 0;
1730          right: 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          left: 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          left: 0;
1775      }
1776      
1777      .media-frame-content {
1778          left: 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-right: 180px;
1813      }
1814  
1815      /* Full-bleed modal */
1816      .media-modal {
1817          position: fixed;
1818          top: 0;
1819          left: 0;
1820          right: 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 0 0 10px;
1868      }
1869  
1870      .media-menu a {
1871          float: left;
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  }