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