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