wp-includes/css/media-views-rtl.css

   1 /**
   2  * Base Styles
   3  */
   4 .media-modal * {
   5         -webkit-box-sizing: content-box;
   6         -moz-box-sizing: content-box;
   7         box-sizing: content-box;
   8 }
   9
  10 .media-modal,
  11 .media-frame {
  12         font-family: "Open Sans", sans-serif;
  13         font-size: 12px;
  14 }
  15
  16 .media-frame input,
  17 .media-frame textarea {
  18         padding: 6px 8px;
  19         line-height: 16px;
  20 }
  21
  22 .media-frame select,
  23 .wp-admin .media-frame select {
  24         line-height: 28px;
  25         margin-top: 3px;
  26 }
  27
  28 .media-frame a {
  29         border-bottom: none;
  30         color: #21759b;
  31 }
  32
  33 .media-frame a:hover {
  34         color: #d54e21;
  35 }
  36
  37 .media-frame a.button {
  38         color: #333;
  39 }
  40
  41 .media-frame a.button:hover {
  42         color: #222;
  43 }
  44
  45 .media-frame a.button-primary,
  46 .media-frame a.button-primary:hover {
  47         color: #fff;
  48 }
  49
  50 .media-frame input[type="text"],
  51 .media-frame input[type="password"],
  52 .media-frame input[type="number"],
  53 .media-frame input[type="search"],
  54 .media-frame input[type="email"],
  55 .media-frame input[type="url"],
  56 .media-frame textarea,
  57 .media-frame select {
  58         font-family: "Open Sans", sans-serif;
  59         font-size: 12px;
  60         -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         right: 30px;
 116         left: 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         right: 0;
 129         left: 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         left: 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         right: 0;
 181         left: 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         right: 0;
 203         left: 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: left;
 213         height: 100%;
 214 }
 215
 216 .media-toolbar-secondary {
 217         float: right;
 218         height: 100%;
 219 }
 220
 221 .media-toolbar-primary > .media-button,
 222 .media-toolbar-primary > .media-button-group {
 223         margin-right: 10px;
 224         float: right;
 225         margin-top: 15px;
 226 }
 227
 228 .media-toolbar-secondary > .media-button,
 229 .media-toolbar-secondary > .media-button-group {
 230         margin-left: 10px;
 231         float: right;
 232         margin-top: 15px;
 233 }
 234
 235 /**
 236  * Sidebar
 237  */
 238 .media-sidebar {
 239         position: absolute;
 240         top: 0;
 241         left: 0;
 242         bottom: 0;
 243         width: 267px;
 244         padding: 0 16px 24px;
 245         z-index: 75;
 246         background: #f3f3f3;
 247         border-right: 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: right;
 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-left: 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: right;
 319         min-height: 22px;
 320         padding-top: 8px;
 321         line-height: 16px;
 322         text-align: left;
 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: left;
 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: right;
 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-left: 4%;
 373         float: right;
 374         text-align: left;
 375 }
 376
 377 .compat-item .label span {
 378         display: block;
 379         width: 100%;
 380 }
 381
 382 .compat-item .field {
 383         float: left;
 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         right: 0;
 400         left: 0;
 401         bottom: 0;
 402         margin: 0;
 403         padding: 16px 0;
 404         background: #f3f3f3;
 405         border-left-width: 1px;
 406         border-left-style: solid;
 407         border-left-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: right;
 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-left: 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         right: 0;
 511         left: 0;
 512         bottom: 0;
 513 }
 514
 515 .media-frame-menu {
 516         position: absolute;
 517         top: 0;
 518         right: 0;
 519         bottom: 0;
 520         width: 200px;
 521         z-index: 150;
 522 }
 523
 524 .media-frame-title {
 525         position: absolute;
 526         top: 0;
 527         right: 200px;
 528         left: 0;
 529         height: 56px;
 530         z-index: 200;
 531 }
 532
 533 .media-frame-router {
 534         position: absolute;
 535         top: 56px;
 536         right: 200px;
 537         left: 0;
 538         height: 36px;
 539         z-index: 200;
 540 }
 541
 542 .media-frame-content {
 543         position: absolute;
 544         top: 90px;
 545         right: 200px;
 546         left: 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         right: 200px;
 560         left: 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         right: 0;
 571 }
 572
 573 .media-frame.hide-menu .media-frame-menu {
 574         right: -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: left;
 609         margin-left: 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         right: 50%;
 629         margin-right: -150px;
 630         margin-left: -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-left: 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-left: 16px;
 671 }
 672
 673 /**
 674  * Attachments
 675  */
 676 .attachments {
 677         margin: 0;
 678         padding-left: 16px;
 679         -webkit-overflow-scrolling: touch;
 680 }
 681
 682 /**
 683  * Attachment
 684  */
 685 .attachment {
 686         position: relative;
 687         float: right;
 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         right: 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         right: 0;
 745         left: 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         right: 0;
 779         left: 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         left: 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         left: -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         left: 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         right: 0;
 925         left: 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-left: 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         right: 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         left: 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-left: 8px;
1048         font-weight: bold;
1049         color: #fff;
1050         background: #e00;
1051         background-image: -webkit-gradient(linear, right top, right 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         right: 0;
1069         left: 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         right: 10px;
1084         left: 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         right: 0;
1094         left: 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         right: 0;
1129         left: 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         right: 0;
1188         left: 350px;
1189         height: 60px;
1190         padding: 0 16px 0 0;
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-left: 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: right;
1223         padding: 1px 8px;
1224         margin: 1px -8px 1px 8px;
1225         line-height: 16px;
1226         text-decoration: none;
1227         border-left: 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-left: 0;
1239         margin-left: 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         left: 0;
1296         bottom: 0;
1297         width: 25px;
1298         background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1299         background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1300         background-image: linear-gradient(to right, 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: left;
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: left;
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: right;
1375         max-width: 120px;
1376         max-height: 120px;
1377         margin-top: 5px;
1378         margin-left: 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         right: 0;
1399         left: 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: right;
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: right;
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: right;
1467         margin-left: 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         left: 0;
1485         bottom: 0;
1486         right: 0;
1487 }
1488
1489 .media-frame .imgedit-wrap .imgedit-panel-content {
1490         padding: 16px;
1491         position: absolute;
1492         top: 0;
1493         left: 282px;
1494         bottom: 0;
1495         right: 0;
1496         overflow: auto;
1497 }
1498
1499 .media-frame .imgedit-wrap .imgedit-settings {
1500         background: #f3f3f3;
1501         border-right: 1px solid #ddd;
1502         padding: 0 16px 16px;
1503         position: absolute;
1504         top: 0;
1505         left: 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         left: 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         right: 0;
1599         left: 0;
1600         bottom: 0;
1601         padding: 16px 16px 32px;
1602         overflow: auto;
1603 }
1604
1605 .image-details .media-modal {
1606         right: 140px;
1607         left: 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         right: 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-left: 1px solid #ddd;
1629         min-height: 100%;
1630         width: 52%;
1631         position: absolute;
1632         top: 0;
1633         right: 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         right: 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: right;
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: right;
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: right;
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         right: 0;
1731         left: 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: right;
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-right: 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 .media-embed .setting textarea.hidden {
1786         display: none;
1787 }
1788
1789 .media-embed .setting span {
1790         display: block;
1791         width: 200px;
1792         font-size: 13px;
1793         line-height: 24px;
1794         color: #666;
1795 }
1796
1797 .image-details .embed-media-settings .setting span {
1798         float: right;
1799         width: 25%;
1800         text-align: left;
1801         margin: 8px 1% 0 1%;
1802         line-height: 1.1;
1803 }
1804
1805 .media-embed .setting .button-group {
1806         margin: 2px 0;
1807 }
1808
1809 .media-embed-sidebar {
1810         position: absolute;
1811         top: 0;
1812         right: 440px;
1813 }
1814
1815 .advanced-section,
1816 .link-settings {
1817         margin-top: 10px;
1818 }
1819
1820 /* Drag & drop on the editor upload */
1821 #wp-fullscreen-body .uploader-editor,
1822 .wp-editor-wrap .uploader-editor {
1823         background: rgba( 150, 150, 150, 0.9 );
1824         position: absolute;
1825         top: 0;
1826         right: 0;
1827         width: 100%;
1828         height: 100%;
1829         z-index: 99998; /* under the toolbar */
1830         display: none;
1831         text-align: center;
1832 }
1833
1834 #wp-fullscreen-body .uploader-editor {
1835         background: rgba( 0, 86, 132, 0.9 );
1836         position: fixed;
1837         z-index: 100050; /* above the editor toolbar */
1838 }
1839
1840 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
1841         opacity: 0;
1842 }
1843
1844 #wp-fullscreen-body .uploader-editor-content,
1845 .wp-editor-wrap .uploader-editor-content {
1846         border: 1px dashed #fff;
1847         position: absolute;
1848         top: 10px;
1849         right: 10px;
1850         left: 10px;
1851         bottom: 10px;
1852 }
1853
1854 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
1855 .wp-editor-wrap .uploader-editor .uploader-editor-title {
1856         position: absolute;
1857         top: 50%;
1858         right: 0;
1859         left: 0;
1860         -webkit-transform: translateY( -50% );
1861         -ms-transform: translateY( -50% );
1862         transform: translateY( -50% );
1863         font-size: 3em;
1864         line-height: 1.3;
1865         font-weight: bold;
1866         color: #fff;
1867         padding: 0;
1868         margin: 0;
1869         display: none;
1870 }
1871
1872 .wp-editor-wrap .uploader-editor.droppable {
1873         background: rgba( 0, 86, 132, 0.9 );
1874 }
1875
1876 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
1877 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
1878         display: block;
1879 }
1880
1881 /**
1882  * IE7 Fixes
1883  */
1884 .ie7 .media-frame .attachments-browser {
1885         position: static;
1886 }
1887
1888 .ie7 .media-frame .embed-url input {
1889         margin-top: 4px;
1890         width: 90%;
1891 }
1892
1893 .ie7 .compat-item {
1894         width: 99%;
1895 }
1896
1897 .ie7 .attachment-display-settings {
1898         width: auto;
1899 }
1900
1901 .ie7 .attachment-preview,
1902 .ie7 .attachment-preview .thumbnail {
1903         width: 120px;
1904         height: 120px;
1905 }
1906
1907 .ie7 .media-frame .attachment .describe {
1908         width: 102px;
1909 }
1910
1911 .ie7 .media-sidebar .setting select {
1912         max-width: 55%;
1913 }
1914
1915 .ie7 .media-sidebar .setting input,
1916 .ie7 .media-sidebar .setting textarea {
1917         width: 55%;
1918 }
1919
1920 .ie7 .media-sidebar .setting .link-to-custom {
1921         float: right;
1922 }
1923
1924 /**
1925  * Localization
1926  */
1927 .rtl .media-modal,
1928 .rtl .media-frame,
1929 .rtl .media-frame .search,
1930 .rtl .media-frame input[type="text"],
1931 .rtl .media-frame input[type="password"],
1932 .rtl .media-frame input[type="number"],
1933 .rtl .media-frame input[type="search"],
1934 .rtl .media-frame input[type="email"],
1935 .rtl .media-frame input[type="url"],
1936 .rtl .media-frame textarea,
1937 .rtl .media-frame select {
1938         font-family: Tahoma, sans-serif;
1939 }
1940
1941 :lang(he-il) .rtl .media-modal,
1942 :lang(he-il) .rtl .media-frame,
1943 :lang(he-il) .rtl .media-frame .search,
1944 :lang(he-il) .rtl .media-frame input[type="text"],
1945 :lang(he-il) .rtl .media-frame input[type="password"],
1946 :lang(he-il) .rtl .media-frame input[type="number"],
1947 :lang(he-il) .rtl .media-frame input[type="search"],
1948 :lang(he-il) .rtl .media-frame input[type="email"],
1949 :lang(he-il) .rtl .media-frame input[type="url"],
1950 :lang(he-il) .rtl .media-frame textarea,
1951 :lang(he-il) .rtl .media-frame select {
1952         font-family: Arial, sans-serif;
1953 }
1954
1955
1956
1957
1958 @media only screen and (max-width: 960px) {
1959         .media-frame-content .media-toolbar-primary .search,
1960         .media-frame-content .media-toolbar-secondary .attachment-filters {
1961                 max-width: 120px;
1962         }
1963 }
1964
1965 /**
1966  * Responsive layout
1967  */
1968 @media only screen and (max-width: 900px) {
1969         .media-frame-menu {
1970                 width: 139px;
1971         }
1972
1973         .media-menu > a {
1974                 padding: 4px 5px;
1975         }
1976
1977         .media-frame-title,
1978         .media-frame-router,
1979         .media-frame-content,
1980         .media-frame-toolbar {
1981                 right: 140px;
1982         }
1983
1984         .media-sidebar {
1985                 width: 159px;
1986                 padding: 0 10px 24px;
1987         }
1988
1989         .attachments-browser .attachments,
1990         .attachments-browser .uploader-inline,
1991         .attachments-browser .media-toolbar {
1992                 left: 180px;
1993         }
1994
1995         .media-sidebar .setting input,
1996         .media-sidebar .setting textarea,
1997         .media-sidebar .setting span,
1998         .compat-item label span {
1999                 float: none;
2000         }
2001
2002         .media-sidebar .setting span,
2003         .compat-item label span {
2004                 text-align: inherit;
2005                 display: block;
2006                 min-height: 16px;
2007                 margin: 0;
2008                 padding: 8px 2px 0;
2009         }
2010
2011         .media-sidebar .setting input,
2012         .media-sidebar .setting textarea,
2013         .media-sidebar .setting select {
2014                 width: 98%;
2015                 max-width: none;
2016         }
2017
2018         .media-sidebar .setting select.columns {
2019                 width: auto;
2020         }
2021
2022         .media-frame input,
2023         .media-frame textarea,
2024         .media-frame .search {
2025                 padding: 3px 6px;
2026         }
2027
2028         .media-frame-content .attachment .icon {
2029                 top: 40%;
2030         }
2031
2032         .image-details .media-modal {
2033                 right: 30px;
2034                 left: 30px;
2035         }
2036
2037         .image-details .embed-media-settings .setting {
2038                 margin: 20px;
2039         }
2040
2041         .image-details .embed-media-settings .setting span {
2042                 float: none;
2043                 text-align: right;
2044                 width: 100%;
2045                 margin-bottom: 4px;
2046         }
2047
2048         .image-details .embed-media-settings .setting input.link-to-custom,
2049         .image-details .embed-media-settings .setting input[type="text"],
2050         .image-details .embed-media-settings .setting textarea {
2051                 width: 100%;
2052                 margin-right: 0;
2053         }
2054
2055         .image-details .embed-media-settings .custom-size {
2056                 margin-right: 20px;
2057         }
2058
2059         .media-selection {
2060                 min-width: 120px;
2061         }
2062
2063         .media-selection:after {
2064                 background: none;
2065         }
2066
2067         .media-selection .attachments {
2068                 display: none;
2069         }
2070
2071         .media-menu .separator {
2072                 margin: 12px 10px;
2073         }
2074
2075         .media-modal-close {
2076                 left: 10px;
2077         }
2078
2079         /* Text inputs need to be 16px, or they force zooming on iOS */
2080         .media-frame input[type="text"],
2081         .media-frame input[type="password"],
2082         .media-frame input[type="number"],
2083         .media-frame input[type="search"],
2084         .media-frame input[type="email"],
2085         .media-frame input[type="url"],
2086         .media-frame textarea,
2087         .media-frame select {
2088                 font-size: 16px;
2089         }
2090 }
2091
2092 /* Responsive on portrait and landscape */
2093 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2094
2095         /* Media tabs on the top */
2096         .media-frame-content .media-toolbar .instructions {
2097                 display: none;
2098         }
2099
2100         .media-frame-menu {
2101                 width: auto;
2102                 bottom: auto;
2103                 left: 0;
2104                 height: 60px;
2105         }
2106
2107         .media-menu {
2108                 border-left: none;
2109                 position: relative;
2110                 border-bottom: 1px solid #dddddd;
2111                 overflow: hidden;
2112                 padding: 10px 10px 10px 0;
2113         }
2114
2115         .media-menu a {
2116                 float: right;
2117                 width: 42%;
2118                 white-space: nowrap;
2119                 text-overflow: ellipsis;
2120                 overflow: hidden;
2121         }
2122
2123         .media-frame-title {
2124                 display: none;
2125         }
2126
2127         .image-details .media-frame-title {
2128                 display: block;
2129                 top: 0;
2130                 font-size: 14px;
2131         }
2132
2133         .media-frame-toolbar {
2134                 position: absolute;
2135                 bottom: 0px;
2136                 right: 0;
2137                 left: 0;
2138                 background: #FFF;
2139                 border-top: 1px solid #DEDEDE;
2140         }
2141
2142         .media-toolbar {
2143                 position: relative;
2144         }
2145
2146         .media-frame {
2147                 overflow: hidden;
2148         }
2149
2150         .attachments-browser .attachments {
2151                 top: 42px;
2152         }
2153
2154         .attachment-details h3 {
2155                 margin-top: 45px;
2156         }
2157
2158         /* Shorten right-side links so they don't overlap the close button */
2159         .media-menu a:nth-child(2),
2160         .media-menu a:last-child {
2161                 width: 40%;
2162         }
2163
2164         .media-menu .separator {
2165                 display: none;
2166         }
2167
2168         .media-frame-title {
2169                 top: 72px;
2170                 right: auto;
2171                 height: auto;
2172         }
2173
2174         .media-frame-title h1 {
2175                 line-height: 3;
2176                 font-size: 18px;
2177         }
2178
2179         .media-frame-router {
2180                 top: 84px;
2181                 right: 0;
2182         }
2183
2184         .media-frame-content {
2185                 right: 0;
2186                 top: 118px;
2187         }
2188
2189         .image-details .media-frame.hide-router .media-frame-content {
2190                 top: 40px;
2191         }
2192
2193         .media-frame .attachments-browser {
2194                 padding-bottom: 300px;
2195         }
2196
2197         .media-sidebar {
2198                 border-bottom: 1px solid #dddddd;
2199         }
2200
2201         .media-modal {
2202                 width: auto;
2203         }
2204
2205         .media-toolbar-primary, .media-toolbar-secondary {
2206                 height: auto;
2207         }
2208
2209         .uploader-inline h3 {
2210                 margin: 0 0 .8em 0;
2211         }
2212
2213         .uploader-inline-content {
2214                 top: auto;
2215         }
2216
2217         .uploader-inline-content .upload-ui {
2218                 margin: 0;
2219         }
2220
2221         .attachments-browser .attachments, .attachments-browser .uploader-inline {
2222                 position: relative;
2223                 margin-left: 180px;
2224         }
2225
2226         /* Full-bleed modal */
2227         .media-modal,
2228         .image-details .media-modal {
2229                 position: fixed;
2230                 top: 0;
2231                 right: 0;
2232                 left: 0;
2233                 bottom: 0;
2234         }
2235
2236         .media-modal-backdrop {
2237                 position: fixed;
2238         }
2239
2240         .attachments-browser .attachment,
2241         .attachments-browser .attachment-preview {
2242                 max-width: 100%;
2243         }
2244
2245         .attachments-browser .media-toolbar-primary input.search {
2246                 max-width: 150px;
2247         }
2248
2249         .uploader-inline-content {
2250                 position: relative;
2251         }
2252
2253         .media-sidebar .setting input[type="checkbox"],
2254         .media-sidebar .field input[type="checkbox"] {
2255                 width: 25px;
2256         }
2257
2258         /* Image From Link */
2259         .embed-link-settings,
2260         .embed-media-settings {
2261                 padding-bottom: 52px;
2262         }
2263
2264         .image-details .column-settings,
2265         .image-details .column-image {
2266                 position: relative;
2267                 padding: 10px 0 20px 0;
2268                 right: 0;
2269                 width: 100%;
2270                 min-height: inherit;
2271         }
2272
2273
2274         /* Gallery */
2275         .media-frame.hide-router .media-frame-content {
2276                 top: 73px;
2277                 border-top: none;
2278         }
2279
2280         .collection-settings h3 {
2281                 margin-top: 45px;
2282         }
2283
2284 }
2285
2286 /* Landscape specific header override */
2287 @media screen and (max-height: 400px) {
2288         .media-menu {
2289                 padding: 0 10px 0 0;
2290         }
2291
2292         .media-menu a {
2293                 float: right;
2294                 width: 21%;
2295                 white-space: nowrap;
2296                 text-overflow: ellipsis;
2297                 overflow: hidden;
2298                 padding: 10px inherit;
2299         }
2300
2301         .media-menu a:nth-child(2),
2302         .media-menu a:last-child {
2303                 width: 21%;
2304         }
2305
2306         .media-modal-close {
2307                 top: 2px;
2308         }
2309
2310         .media-frame-router {
2311                 top: 44px;
2312         }
2313
2314         .media-frame-content {
2315                 top: 78px;
2316         }
2317
2318         .attachments-browser .attachments {
2319                 top: 2px;
2320         }
2321
2322         /* Prevent unnecessary scrolling on title input */
2323         .embed-link-settings {
2324                 overflow: visible;
2325         }
2326 }
2327
2328 @media only screen and (max-width: 680px) {
2329         .media-frame-content .media-toolbar .search,
2330         .media-frame-content .media-toolbar .attachment-filters {
2331                 max-width: 85px;
2332         }
2333 }
2334
2335 /**
2336  * HiDPI Displays
2337  */
2338 @media print,
2339   (-o-min-device-pixel-ratio: 5/4),
2340   (-webkit-min-device-pixel-ratio: 1.25),
2341   (min-resolution: 120dpi) {
2342
2343         .media-modal-icon {
2344                 background-image: url(../images/uploader-icons-2x.png);
2345                 -webkit-background-size: 134px 15px;
2346                 background-size: 134px 15px;
2347         }
2348
2349         .media-frame .spinner {
2350                 background-image: url(../images/spinner-2x.gif);
2351         }
2352 }