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