wp-admin/css/press-this.css

   1 /*
   2 Press This styles :)
   3 */
   4
   5
   6 /**
   7 * Normalize
   8 *
   9 * normalize.css v3.0.0 | MIT License | git.io/normalize
  10 */
  11 html {
  12         font-family: sans-serif;
  13         -ms-text-size-adjust: 100%;
  14         -webkit-text-size-adjust: 100%;
  15 }
  16
  17 body {
  18         margin: 0;
  19 }
  20
  21 *,
  22 *:before,
  23 *:after {
  24         -webkit-box-sizing: border-box;
  25         -moz-box-sizing: border-box;
  26         box-sizing: border-box;
  27 }
  28 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  29         *,
  30         *:before,
  31         *:after {
  32                 -webkit-font-smoothing: antialiased;
  33         }
  34 }
  35
  36 article,
  37 aside,
  38 details,
  39 figcaption,
  40 figure,
  41 footer,
  42 header,
  43 hgroup,
  44 main,
  45 nav,
  46 section,
  47 summary {
  48         display: block;
  49 }
  50
  51 audio,
  52 canvas,
  53 progress,
  54 video {
  55         display: inline-block;
  56         vertical-align: baseline;
  57 }
  58
  59 audio:not([controls]) {
  60         display: none;
  61         height: 0;
  62 }
  63
  64 [hidden],
  65 template {
  66         display: none;
  67 }
  68
  69 a {
  70         background: transparent;
  71 }
  72
  73 a:active,
  74 a:hover {
  75         outline: 0;
  76 }
  77
  78 abbr[title] {
  79         border-bottom: 1px dotted;
  80 }
  81
  82 b,
  83 strong {
  84         font-weight: bold;
  85 }
  86
  87 dfn {
  88         font-style: italic;
  89 }
  90
  91 h1 {
  92         font-size: 2em;
  93         margin: 0.67em 0;
  94 }
  95
  96 mark {
  97         background: #ff0;
  98         color: #000;
  99 }
 100
 101 small {
 102         font-size: 80%;
 103 }
 104
 105 sub,
 106 sup {
 107         font-size: 75%;
 108         line-height: 0;
 109         position: relative;
 110         vertical-align: baseline;
 111 }
 112
 113 sup {
 114         top: -0.5em;
 115 }
 116
 117 sub {
 118         bottom: -0.25em;
 119 }
 120
 121 img {
 122         border: 0;
 123 }
 124
 125 svg:not(:root) {
 126         overflow: hidden;
 127 }
 128
 129 figure {
 130         margin: 1em 40px;
 131 }
 132
 133 hr {
 134         -webkit-box-sizing: content-box;
 135         -moz-box-sizing: content-box;
 136         box-sizing: content-box;
 137         height: 0;
 138 }
 139
 140 pre {
 141         overflow: auto;
 142 }
 143
 144 code,
 145 kbd,
 146 pre,
 147 samp {
 148         font-family: monospace, monospace;
 149         font-size: 1em;
 150 }
 151
 152 button,
 153 input,
 154 optgroup,
 155 select,
 156 textarea {
 157         color: inherit;
 158         font: inherit;
 159         margin: 0;
 160 }
 161
 162 button {
 163         overflow: visible;
 164 }
 165
 166 button,
 167 select {
 168         text-transform: none;
 169 }
 170
 171 button,
 172 html input[type="button"],
 173 input[type="reset"],
 174 input[type="submit"] {
 175         -webkit-appearance: button;
 176         cursor: pointer;
 177 }
 178
 179 button[disabled],
 180 html input[disabled] {
 181         cursor: default;
 182 }
 183
 184 button::-moz-focus-inner,
 185 input::-moz-focus-inner {
 186         border: 0;
 187         padding: 0;
 188 }
 189
 190 input {
 191         line-height: normal;
 192 }
 193
 194 input[type="checkbox"],
 195 input[type="radio"] {
 196         -webkit-box-sizing: border-box;
 197         -moz-box-sizing: border-box;
 198         box-sizing: border-box;
 199         padding: 0;
 200 }
 201
 202 input[type="number"]::-webkit-inner-spin-button,
 203 input[type="number"]::-webkit-outer-spin-button {
 204         height: auto;
 205 }
 206
 207 input[type="search"] {
 208         -webkit-appearance: textfield;
 209         -webkit-box-sizing: content-box;
 210         -moz-box-sizing: content-box;
 211         box-sizing: content-box;
 212 }
 213
 214 input[type="search"]::-webkit-search-cancel-button,
 215 input[type="search"]::-webkit-search-decoration {
 216         -webkit-appearance: none;
 217 }
 218
 219 fieldset {
 220         border: 0;
 221         margin: 0;
 222         padding: 0;
 223 }
 224
 225 legend {
 226         border: 0;
 227         padding: 0;
 228 }
 229
 230 textarea {
 231         overflow: auto;
 232 }
 233
 234 optgroup {
 235         font-weight: bold;
 236 }
 237
 238 table {
 239         border-collapse: collapse;
 240         border-spacing: 0;
 241 }
 242
 243 td,
 244 th {
 245         padding: 0;
 246 }
 247
 248 .clearfix:before,
 249 .clearfix:after {
 250         content: "";
 251         display: table;
 252 }
 253 .clearfix:after {
 254         clear: both;
 255 }
 256
 257 .hide-if-js {
 258         display: none;
 259 }
 260
 261 .screen-reader-text {
 262         position: absolute;
 263         margin: -1px;
 264         padding: 0;
 265         height: 1px;
 266         width: 1px;
 267         overflow: hidden;
 268         clip: rect(0 0 0 0);
 269         border: 0;
 270 }
 271
 272
 273 /**
 274 * Typography
 275 *
 276 * Base element typographic styles.
 277 */
 278 body,
 279 button,
 280 input,
 281 select,
 282 textarea {
 283         color: #404040;
 284         font-family: "Open Sans", Helvetica, Arial, sans-serif;
 285         font-size: 20px;
 286         font-weight: 400;
 287         line-height: 1.6;
 288 }
 289
 290 h1,
 291 h2,
 292 h3,
 293 h4,
 294 h5,
 295 h6 {
 296         clear: both;
 297 }
 298
 299 p {
 300         margin-bottom: 1.5em;
 301 }
 302
 303 b,
 304 strong {
 305         font-weight: 700;
 306 }
 307
 308
 309 /**
 310 * Buttons
 311 *
 312 * Pushing buttons is what I do.
 313 */
 314
 315 .button-subtle,
 316 .scan-submit {
 317         display: inline-block;
 318         margin: 0;
 319         padding: 0 10px 1px;
 320         border-width: 1px;
 321         border-style: solid;
 322         -webkit-border-radius: 3px;
 323         border-radius: 3px;
 324         font-size: 13px;
 325         line-height: 2;
 326         text-decoration: none;
 327         white-space: nowrap;
 328         cursor: pointer;
 329         -webkit-appearance: none;
 330 }
 331
 332 .button-subtle {
 333         background: none;
 334         border: 0;
 335         color: #0073aa;
 336 }
 337
 338 .button-subtle:visited {
 339         color: #0073aa;
 340 }
 341
 342 .button-subtle:focus,
 343 .button-subtle:hover,
 344 .button-subtle:active,
 345 .edit-post-link:focus,
 346 .edit-post-link:hover,
 347 .edit-post-link:active {
 348         color: #00a0d2;
 349 }
 350
 351 .button-subtle:focus,
 352 .button-subtle:active,
 353 .edit-post-link:focus,
 354 .edit-post-link:active {
 355         outline: 0;
 356         text-decoration: underline;
 357 }
 358
 359 .preview-button {
 360         margin-right: 5px;
 361 }
 362
 363 .button-reset {
 364         margin: 0;
 365         padding: 0;
 366         border: 0;
 367         background: none;
 368         cursor: pointer;
 369         -webkit-appearance: none;
 370 }
 371
 372 .button-reset:focus {
 373         outline: 0;
 374 }
 375
 376 .button-link {
 377         margin: 0;
 378         padding: 0;
 379         border: 0;
 380         background: none;
 381         color: #0073aa;
 382         cursor: pointer;
 383         -webkit-appearance: none;
 384 }
 385
 386 .button-link:hover,
 387 .button-link:active,
 388 .button-link:focus {
 389         color: #00a0d2;
 390         text-decoration: underline;
 391 }
 392
 393 .split-button {
 394         position: relative;
 395         display: inline-block;
 396         vertical-align: middle;
 397 }
 398
 399 .split-button-body {
 400         display: none;
 401         position: absolute;
 402         bottom: 39px;
 403         right: 0;
 404         border: 1px solid #ddd;
 405         background-color: #fff;
 406         min-width: 180px;
 407         max-width: 100%;
 408         margin: 0;
 409         padding: 8px;
 410         list-style: none;
 411         -webkit-box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
 412         box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
 413 }
 414
 415 .split-button-body:before,
 416 .split-button-body:after {
 417         position: absolute;
 418         right: 12px;
 419         display: block;
 420         width: 0;
 421         height: 0;
 422         border-style: solid;
 423         border-color: transparent;
 424         content: '';
 425 }
 426
 427 .split-button-body:before {
 428         bottom: -18px;
 429         border-top-color: #ccc;
 430         border-width: 9px;
 431         right: 11px;
 432 }
 433
 434 .split-button-body:after {
 435         bottom: -16px;
 436         border-top-color: #fff;
 437         border-width: 8px;
 438 }
 439
 440 .split-button-body .split-button-option {
 441         display: block;
 442         padding: 5px 15px;
 443         margin: 0;
 444         width: 100%;
 445         text-align: left;
 446 }
 447
 448 .is-open .split-button-body {
 449         display: block;
 450 }
 451
 452 .split-button-primary,
 453 .split-button-toggle {
 454         -webkit-border-radius: 0;
 455         border-radius: 0;
 456         display: block;
 457         margin: 0;
 458         font-size: 13px;
 459         text-decoration: none;
 460         white-space: nowrap;
 461         cursor: pointer;
 462         -webkit-appearance: none;
 463         line-height: 2;
 464         padding: 0 10px 1px;
 465         background: #00a0d2;
 466         border-color: #0073aa;
 467         border-width: 1px;
 468         border-style: solid;
 469         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
 470         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
 471         color: #fff;
 472 }
 473
 474 .split-button-primary {
 475         -webkit-border-top-left-radius: 3px;
 476         border-top-left-radius: 3px;
 477         -webkit-border-bottom-left-radius: 3px;
 478         border-bottom-left-radius: 3px;
 479         border-right: 0 none;
 480         float: left;
 481 }
 482
 483 .split-button-toggle {
 484         padding: 0;
 485         -webkit-border-top-right-radius: 3px;
 486         border-top-right-radius: 3px;
 487         -webkit-border-bottom-right-radius: 3px;
 488         border-bottom-right-radius: 3px;
 489         border-left: 0 none;
 490         float: right;
 491 }
 492
 493 .split-button-toggle i {
 494         margin: 4px 20px 3px 0;
 495         padding: 0 10px;
 496         border-left: 1px solid #fff;
 497 }
 498
 499 .split-button-primary:hover,
 500 .split-button-toggle:hover {
 501         outline: none;
 502         background: #0091cd;
 503         border-color: #0073aa;
 504 }
 505
 506 .split-button-primary:focus,
 507 .split-button-toggle:focus {
 508         outline: none;
 509         border-color: #0e3950;
 510         -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
 511                 0 0 0 1px #5b9dd9,
 512                 0 0 2px 1px rgba(30, 140, 190, .8);
 513         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
 514                 0 0 0 1px #5b9dd9,
 515                 0 0 2px 1px rgba(30, 140, 190, .8);
 516 }
 517
 518 .split-button-primary:active,
 519 .split-button-toggle:active {
 520         background: #0073aa;
 521         border-color: #005082;
 522         color: rgba( 255, 255, 255, 0.95 );
 523         -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
 524         box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
 525 }
 526
 527 /**
 528 * Forms
 529 *
 530 * So many input types.
 531 */
 532 button,
 533 input,
 534 select,
 535 textarea {
 536         font-size: 100%;
 537         margin: 0;
 538         vertical-align: baseline;
 539         *vertical-align: middle;
 540 }
 541
 542 [type="checkbox"],
 543 [type="radio"] {
 544         padding: 0;
 545 }
 546
 547 [type="search"] {
 548         -webkit-appearance: textfield;
 549         -webkit-box-sizing: content-box;
 550         -moz-box-sizing: content-box;
 551         box-sizing: content-box;
 552 }
 553
 554 [type="search"]::-webkit-search-decoration {
 555         -webkit-appearance: none;
 556 }
 557
 558 button::-moz-focus-inner,
 559 input::-moz-focus-inner {
 560         border: 0;
 561         padding: 0;
 562 }
 563
 564 [type="text"],
 565 [type="email"],
 566 [type="url"],
 567 [type="password"],
 568 [type="search"],
 569 textarea {
 570         padding: 0.4em 0.75em;
 571         color: #32373c;
 572         border: 1px solid #ccc;
 573 }
 574
 575 [type="text"]:focus,
 576 [type="email"]:focus,
 577 [type="url"]:focus,
 578 [type="password"]:focus,
 579 [type="search"]:focus,
 580 textarea:focus {
 581         color: #32373c;
 582         outline: 0;
 583 }
 584
 585 textarea {
 586         overflow: auto;
 587         padding-left: 3px;
 588         vertical-align: top;
 589 }
 590
 591
 592 /**
 593 * Links
 594 */
 595 a {
 596         color: #0073aa;
 597 }
 598
 599 a:visited {
 600         color: #0073aa;
 601 }
 602
 603 a:hover,
 604 a:focus,
 605 a:active {
 606         color: #00a0d2;
 607 }
 608
 609
 610 /**
 611 * Lists
 612 */
 613 ul,
 614 ol {
 615         margin: 0 0 1.5em 3em;
 616 }
 617
 618 ul {
 619         list-style: disc;
 620 }
 621
 622 ol {
 623         list-style: decimal;
 624 }
 625
 626 li > ul,
 627 li > ol {
 628         margin-bottom: 0;
 629         margin-left: 1.5em;
 630 }
 631
 632 dt {
 633         font-weight: 700;
 634 }
 635
 636 dd {
 637         margin: 0 1.5em 1.5em;
 638 }
 639
 640
 641 /**
 642 * Post formats
 643 *
 644 * Complete styles for post formats UI
 645 */
 646 /* TODO if we remove the <br> during merge, this can go. */
 647 #post-formats-select br {
 648         display: none;
 649 }
 650
 651 .post-format {
 652         width: 1px;
 653         height: 1px;
 654         position: absolute;
 655         top: -9999px;
 656 }
 657
 658 .lt-ie9 .post-format {
 659         margin: 17px 12px 0 13px;
 660         width: auto;
 661         height: auto;
 662         position: static;
 663         top: auto;
 664         float: left;
 665         width: 16px;
 666         height: 16px;
 667 }
 668
 669 .post-format-icon {
 670         position: relative;
 671         display: block;
 672         padding: 13px 2px 14px 13px;
 673         cursor: pointer;
 674 }
 675
 676 .post-format-icon:before,
 677 .post-format-icon:after {
 678         content: "";
 679         display: inline-block;
 680         width: 20px;
 681         height: 20px;
 682         margin-right: 10px;
 683         font-size: 20px;
 684         line-height: 1;
 685         font-family: dashicons;
 686         text-decoration: inherit;
 687         color: #9ea7af;
 688         font-weight: 400;
 689         font-style: normal;
 690         vertical-align: top;
 691         text-align: center;
 692         -webkit-transition: color .1s ease-in 0;
 693         transition: color .1s ease-in 0;
 694         -webkit-font-smoothing: antialiased;
 695         -moz-osx-font-smoothing: grayscale;
 696 }
 697
 698 .post-format-icon:before {
 699         content: "\f109";
 700 }
 701
 702 .post-format-icon:after {
 703         display: none;
 704         content: "\f147";
 705         float: right;
 706 }
 707
 708 .post-format:checked + .post-format-icon {
 709         -webkit-box-shadow: inset 6px 0 0 #00a0d2;
 710         box-shadow: inset 6px 0 0 #00a0d2;
 711         background: rgba(46, 162, 204, 0.1);
 712 }
 713
 714 .post-format:checked + .post-format-icon:before,
 715 .post-format:checked + .post-format-icon:after {
 716         color: #32373c;
 717 }
 718
 719 .post-format:focus + .post-format-icon {
 720         background: #00a0d2;
 721         color: #fff;
 722 }
 723
 724 .post-format:focus + .post-format-icon:before,
 725 .post-format:focus + .post-format-icon:after {
 726         color: #fff;
 727 }
 728
 729 .post-format:checked + .post-format-icon:after {
 730         display: block;
 731 }
 732
 733 .lt-ie9 .post-format-icon {
 734         margin-left: 16px;
 735 }
 736
 737 .post-format-aside:before {
 738         content: "\f123";
 739 }
 740
 741 .post-format-image:before {
 742         content: "\f128";
 743 }
 744
 745 .post-format-video:before {
 746         content: "\f126";
 747 }
 748
 749 .post-format-audio:before {
 750         content: "\f127";
 751 }
 752
 753 .post-format-quote:before {
 754         content: "\f122";
 755 }
 756
 757 .post-format-link:before {
 758         content: "\f103";
 759 }
 760
 761 .post-format-gallery:before {
 762         content: "\f161";
 763 }
 764
 765
 766 /**
 767 * Tags
 768 *
 769 * Complete styles for tags UI
 770 */
 771 .tagsdiv p {
 772         margin: 0;
 773 }
 774
 775 .tagsdiv .ajaxtag {
 776         position: relative;
 777 }
 778
 779 .tagsdiv .newtag {
 780         display: block;
 781         position: relative;
 782         padding: 11px 58px 11px 16px;
 783         width: 100%;
 784         border: 0;
 785         border-bottom: 1px solid #e5e5e5;
 786         font-size: 16px;
 787 }
 788
 789 .tagsdiv .tagadd {
 790         position: absolute;
 791         top: 0;
 792         right: 0;
 793         bottom: 1px;
 794         border: 0;
 795         -webkit-border-radius: 0;
 796         border-radius: 0;
 797         margin: 0;
 798         padding: 0 16px;
 799         background: #f7f7f7;
 800         border-left: 1px solid #f1f1f1;
 801         -webkit-box-shadow: none;
 802         box-shadow: none;
 803 }
 804
 805 .tagsdiv .tagadd:hover,
 806 .tagsdiv .tagadd:active,
 807 .tagsdiv .tagadd:focus {
 808         outline: 0;
 809         background: #2991b7;
 810         border-color: #20708e;
 811         color: #fff;
 812         -webkit-box-shadow: none;
 813         box-shadow: none;
 814 }
 815
 816 .tagsdiv .howto {
 817         color: #727272;
 818         font-style: italic;
 819         margin: 10px 0 6px 16px;
 820 }
 821
 822
 823 /* Tag hint TODO needed? */
 824 /* Tag suggestions */
 825 .ac_results {
 826         padding: 0;
 827         margin: -1px 0 0 -1px;
 828         list-style: none;
 829         position: absolute;
 830         z-index: 10000;
 831         display: none;
 832         border: 1px solid #d8d8d8;
 833         background-color: #fff;
 834         font-size: 14px;
 835 }
 836
 837 .ac_results li {
 838         padding: 6px 16px;
 839         white-space: nowrap;
 840         color: #101010;
 841         text-align: left;
 842 }
 843
 844 .ac_results .ac_over {
 845         background-color: #e5e5e5;
 846         background-color: #00a0d2;
 847         color: #fff;
 848         cursor: pointer;
 849 }
 850
 851 .ac_match {
 852         text-decoration: underline;
 853 }
 854
 855 /* Tags */
 856 .tagchecklist {
 857         padding: 16px 28px 5px;
 858 }
 859
 860 .tagchecklist:before,
 861 .tagchecklist:after {
 862         content: "";
 863         display: table;
 864 }
 865
 866 .tagchecklist:after {
 867         clear: both;
 868 }
 869
 870 .tagchecklist span {
 871         display: block;
 872         margin-right: 25px;
 873         float: left;
 874         font-size: 13px;
 875         line-height: 1.8;
 876         white-space: nowrap;
 877         cursor: default;
 878 }
 879
 880 @media (max-width: 600px) {
 881         .tagchecklist span {
 882                 margin-bottom: 15px;
 883                 font-size: 16px;
 884                 line-height: 1.3;
 885         }
 886 }
 887
 888 .tagchecklist .ntdelbutton {
 889         margin: 1px 0 0 -17px;
 890         cursor: pointer;
 891         width: 20px;
 892         height: 20px;
 893         display: block;
 894         float: left;
 895         text-indent: 0;
 896         overflow: hidden;
 897         position: absolute;
 898         outline: 0;
 899 }
 900
 901 .tagchecklist .ntdelbutton:before {
 902         content: '\f153';
 903         display: block;
 904         margin: 2px 0;
 905         height: 20px;
 906         width: 20px;
 907         background: 0 0;
 908         color: #9ea7af;
 909         font: 400 16px/1 dashicons;
 910         text-align: center;
 911         speak: none;
 912         -webkit-font-smoothing: antialiased;
 913 }
 914
 915 .tagchecklist .ntdelbutton:focus:before {
 916         color: #00a0d2;
 917 }
 918
 919
 920 /* THE TAG CLOUD. */
 921 .tagsdiv + p {
 922         margin: 0;
 923 }
 924
 925 .tagcloud-link {
 926         display: block;
 927         padding: 0 16px;
 928         text-decoration: none;
 929         outline: 0;
 930 }
 931
 932 .tagcloud-link:focus {
 933         text-decoration: underline;
 934 }
 935
 936 .popular-tags {
 937         border: none;
 938         line-height: 2em;
 939         padding: 8px 12px 12px;
 940         text-align: justify;
 941 }
 942
 943 .popular-tags a {
 944         padding: 0 3px;
 945 }
 946
 947 .the-tagcloud {
 948         margin: 0;
 949         padding: 16px;
 950 }
 951
 952 .the-tagcloud a {
 953         text-decoration: none;
 954         outline: 0;
 955 }
 956
 957 .the-tagcloud a:focus {
 958         text-decoration: underline;
 959 }
 960
 961 .tagcloud h3 {
 962         margin: 2px 0 12px;
 963 }
 964
 965
 966 /**
 967 * Categories
 968 *
 969 * Complete styles for post categories UI
 970 */
 971 input[type="search"].categories-search,
 972 .add-category-name {
 973         display: block;
 974         width: 100%;
 975         padding: 0.85714em 1.07143em;
 976         border: 0;
 977         -webkit-border-radius: 0;
 978         border-radius: 0;
 979         border-bottom: 1px solid #e5e5e5;
 980         font-size: 14px;
 981         -webkit-appearance: none;
 982         -moz-appearance: none;
 983         appearance: none;
 984 }
 985
 986 @media (max-width: 600px) {
 987         input[type="search"].categories-search,
 988         .add-category-name {
 989                 /* Needs to be 16px to prevent zooming on iOS. Guh. */
 990                 font-size: 16px;
 991         }
 992 }
 993
 994 .add-cat-toggle {
 995         float: right;
 996         margin-top: -45px;
 997         line-height: 20px;
 998         padding: 12px 10px 8px;
 999 }
1000
1001 .add-cat-toggle:focus {
1002         text-decoration: none;
1003         color: #00a0d2;
1004 }
1005
1006 .add-cat-toggle.is-toggled {
1007         padding: 10px;
1008 }
1009
1010 .add-cat-toggle.is-toggled .dashicons:before {
1011         content: "\f179";
1012 }
1013
1014 .add-category {
1015         position: relative;
1016         border-bottom: 1px solid #e5e5e5;
1017 }
1018
1019 .add-category.is-hidden {
1020         display: none;
1021 }
1022
1023 .add-category .add-cat-submit {
1024         position: absolute;
1025         top: 0;
1026         right: 0;
1027         border: 0;
1028         -webkit-border-radius: 0;
1029         border-radius: 0;
1030         padding: 12px 16px;
1031         background: #f7f7f7;
1032         border-left: 1px solid #f1f1f1;
1033 }
1034
1035 .add-category .add-cat-submit:hover,
1036 .add-category .add-cat-submit:active,
1037 .add-category .add-cat-submit:focus {
1038         outline: 0;
1039         background: #2991b7;
1040         border-color: #20708e;
1041         color: #fff;
1042 }
1043
1044 /* Parent category select */
1045 .postform-wrapper {
1046         padding: 12px;
1047 }
1048
1049 .postform {
1050         display: block;
1051         margin: 0;
1052         width: 100%;
1053         height: 34px;
1054         border: 0;
1055         -webkit-border-radius: 0;
1056         border-radius: 0;
1057         border: 1px solid #e5e5e5;
1058         background: #fff;
1059         -webkit-background-size: 20px 20px;
1060         background-size: 20px 20px;
1061         overflow: hidden;
1062         line-height: 21px;
1063         text-overflow: ellipsis;
1064         text-decoration: none;
1065         vertical-align: top;
1066         white-space: nowrap;
1067         cursor: pointer;
1068         outline: 0;
1069 }
1070
1071 .postform:focus {
1072         border-color: #0073aa;
1073         -webkit-box-shadow: 0 0 0 3px #00a0d2;
1074         box-shadow: 0 0 0 3px #00a0d2;
1075         outline: 0;
1076         -moz-outline: none;
1077         -moz-user-focus: ignore;
1078 }
1079
1080 .postform::-ms-expand {
1081         display: none;
1082 }
1083
1084 .postform::-ms-value {
1085         background: none;
1086         color: #727272;
1087 }
1088
1089 .postform:-moz-focusring {
1090         color: transparent;
1091         text-shadow: 0 0 0 #727272;
1092 }
1093
1094 /* Category list */
1095 .categories-select {
1096         margin: 0;
1097         padding: 0;
1098         list-style: none;
1099 }
1100
1101 .categories-select ul {
1102         margin: 0;
1103         padding: 0;
1104         list-style: none;
1105 }
1106
1107 .category {
1108         position: relative;
1109         display: block;
1110         padding: 13px 16px 14px 16px;
1111         cursor: pointer;
1112         background: #fff;
1113 }
1114
1115 .category:focus,
1116 .category.selected:focus {
1117         outline: 0;
1118         background: #00a0d2;
1119         color: #fff;
1120 }
1121
1122 .category.selected {
1123         -webkit-box-shadow: inset 6px 0 0 #00a0d2;
1124         box-shadow: inset 6px 0 0 #00a0d2;
1125         background: #E9F5F9;
1126 }
1127
1128 .category.selected:after {
1129         display: inline-block;
1130         content: "\f147";
1131         position: absolute;
1132         top: 13px;
1133         right: 0;
1134         width: 20px;
1135         height: 20px;
1136         margin-right: 10px;
1137         font-size: 20px;
1138         line-height: 1;
1139         font-family: dashicons;
1140         text-decoration: inherit;
1141         color: #23282d;
1142         font-weight: 400;
1143         font-style: normal;
1144         vertical-align: top;
1145         text-align: center;
1146         -webkit-transition: color .1s ease-in 0;
1147         transition: color .1s ease-in 0;
1148         -webkit-font-smoothing: antialiased;
1149         -moz-osx-font-smoothing: grayscale;
1150 }
1151
1152 .category.selected:focus:after {
1153         color: #fff;
1154 }
1155
1156 .categories-select ul .category {
1157         padding-left: 24px;
1158 }
1159
1160 .categories-select ul ul .category {
1161         padding-left: 32px;
1162 }
1163
1164 .categories-select ul ul ul .category {
1165         padding-left: 40px;
1166 }
1167
1168 .categories-select ul ul ul ul .category {
1169         padding-left: 48px;
1170 }
1171
1172 .categories-select ul ul ul ul ul .category {
1173         padding-left: 56px;
1174 }
1175
1176 .categories-select ul ul ul ul ul ul .category {
1177         padding-left: 64px;
1178 }
1179
1180 .categories-select .is-hidden {
1181         display: none;
1182 }
1183
1184 .categories-select .is-hidden.searched-parent {
1185         display: block;
1186 }
1187
1188 /* Category search */
1189 .categories-search-wrapper {
1190         position: relative;
1191 }
1192
1193 .categories-search-wrapper.is-hidden {
1194         display: none;
1195 }
1196
1197 .categories-search-wrapper label {
1198         position: absolute;
1199         top: 50%;
1200         right: 10px;
1201         margin-top: -10px;
1202         color: #9ea7af;
1203 }
1204
1205
1206 /**
1207 * Main
1208 */
1209 html {
1210         overflow: auto;
1211 }
1212
1213 body {
1214         overflow-x: hidden;
1215         height: 100%;
1216 }
1217
1218 html {
1219         background: #fff;
1220         -webkit-box-shadow: -10px 0 0 rgba(0, 0, 0, 0.3);
1221         box-shadow: -10px 0 0 rgba(0, 0, 0, 0.3);
1222 }
1223
1224 @media (max-width: 900px) {
1225         body {
1226                 font-size: 16px;
1227         }
1228 }
1229
1230 @media (max-width: 320px) {
1231         body {
1232                 font-size: 14px;
1233         }
1234 }
1235
1236 .lt-ie9 {
1237         overflow: visible;
1238 }
1239
1240 .adminbar {
1241         position: relative;
1242         width: 100%;
1243         padding: 0 0.8em;
1244         min-height: 3.2em;
1245         background: #23282d;
1246         color: #fff;
1247         z-index: 9999;
1248 }
1249
1250 .adminbar:before,
1251 .adminbar:after {
1252         content: "";
1253         display: table;
1254 }
1255
1256 .adminbar:after {
1257         clear: both;
1258 }
1259
1260 .adminbar .dashicons {
1261         color: #999;
1262 }
1263
1264 .adminbar button {
1265         position: absolute;
1266         top: 50%;
1267         right: 6px;
1268         margin-top: -13px;
1269 }
1270
1271 @media (max-width: 320px) {
1272         .adminbar {
1273                 min-height: 45px;
1274         }
1275 }
1276
1277 .current-site {
1278         margin-top: 0.5625em;
1279         font-size: 16px;
1280         line-height: 44px;
1281         font-weight: 400;
1282         overflow: hidden;
1283         white-space: nowrap;
1284         text-overflow: ellipsis;
1285 }
1286
1287 @media (max-width: 600px) {
1288         .current-site {
1289                 margin: 3px 0 0;
1290         }
1291 }
1292
1293 @media (max-width: 320px) {
1294         .current-site {
1295                 margin: 0;
1296                 font-size: 14px;
1297         }
1298 }
1299
1300 .current-site-link {
1301         text-decoration: none;
1302 }
1303
1304 .current-site-link:focus {
1305         outline: 0;
1306 }
1307
1308 .current-site-link:focus .current-site-name{
1309         text-decoration: underline;
1310 }
1311
1312 .current-site-name {
1313         color: #ededed;
1314 }
1315
1316 @media (max-width: 320px) {
1317         .current-site-name {
1318                 font-weight: 600;
1319         }
1320 }
1321
1322 .current-site .dashicons-wordpress {
1323         position: relative;
1324         top: -1px;
1325         margin-right: 10px;
1326         vertical-align: middle;
1327 }
1328
1329 .options,
1330 .options.open .on-closed,
1331 .options.closed .on-open {
1332         display: none;
1333 }
1334
1335 @media (max-width: 900px) {
1336         .options {
1337                 display: block;
1338         }
1339 }
1340
1341 .options-panel-back.is-hidden {
1342         display: none;
1343 }
1344
1345 .options:focus .dashicons {
1346         color: #fff;
1347         text-decoration: none;
1348 }
1349
1350 .options .dashicons {
1351         margin-top: 3px;
1352 }
1353
1354 .options {
1355         color: #00a0d2;
1356 }
1357
1358 .alert {
1359         position: relative;
1360         margin: 0;
1361         padding: 16px 50px;
1362         border-bottom: 1px solid #e5e5e5;
1363         font-size: 14px;
1364 }
1365
1366 .alert:before {
1367         content: '';
1368         position: absolute;
1369         top: 50%;
1370         left: 30px;
1371         width: 8px;
1372         height: 8px;
1373         margin-top: -4px;
1374         -webkit-border-radius: 50%;
1375         border-radius: 50%;
1376         background: #00a0d2;
1377 }
1378
1379 @media (max-width: 600px) {
1380         .alert {
1381                 padding: 16px 35px;
1382         }
1383         .alert:before {
1384                 left: 15px;
1385         }
1386 }
1387
1388 .alert.is-error:before {
1389         background: red;
1390 }
1391
1392 .scan {
1393         position: relative;
1394         border-bottom: 1px solid #e5e5e5;
1395 }
1396
1397 @media (max-width: 900px) {
1398         .scan form {
1399                 -webkit-transition: opacity .3s ease-in-out;
1400                 transition: opacity .3s ease-in-out;
1401         }
1402         .scan.is-hidden form {
1403                 opacity: .2;
1404                 pointer-events: none;
1405         }
1406 }
1407
1408 .scan-url {
1409         display: block;
1410         border: 0;
1411         padding: 0.85714em 1.07143em;
1412         font-size: 14px;
1413         width: 100%;
1414 }
1415
1416 @media (max-width: 600px) {
1417         .scan-url {
1418                 font-size: 16px;
1419         }
1420 }
1421
1422 .scan-submit {
1423         position: absolute;
1424         top: 0;
1425         right: 0;
1426         bottom: 0;
1427         padding: 0 1.07143em;
1428         background: #f7f7f7;
1429         border-color: #dedede;
1430         border: 0;
1431         border-left: 1px solid #f1f1f1;
1432         -webkit-border-radius: 0;
1433         border-radius: 0;
1434         color: #555;
1435         font-size: 14px;
1436         line-height: 1.6;
1437 }
1438
1439 .scan-submit:hover,
1440 .scan-submit:focus {
1441         background: #2991b7;
1442         border-color: #20708e;
1443         color: #fff;
1444         outline: 0;
1445 }
1446
1447 .scan-submit:active {
1448         background: #2581a2;
1449         border-color: #20708e;
1450         color: #fff;
1451 }
1452
1453 .scan-submit:visited {
1454         color: #555;
1455 }
1456
1457 .wrapper {
1458         position: relative;
1459         margin-bottom: 60px;
1460         margin-right: 320px;
1461 }
1462
1463 .wrapper:before,
1464 .wrapper:after {
1465         content: "";
1466         display: table;
1467 }
1468
1469 .wrapper:after {
1470         clear: both;
1471 }
1472
1473 @media (max-width: 900px) {
1474         .wrapper {
1475                 margin: 0;
1476                 width: 100%;
1477         }
1478 }
1479
1480 .editor-wrapper {
1481         overflow: auto;
1482         float: left;
1483         width: 100%;
1484 }
1485
1486 .editor-wrapper:before,
1487 .editor-wrapper:after {
1488         content: "";
1489         display: table;
1490 }
1491
1492 .editor-wrapper:after {
1493         clear: both;
1494 }
1495
1496 .editor {
1497         padding: 0 1.5em 4.75em;
1498         max-width: 700px;
1499         margin: 0 auto;
1500 }
1501
1502 .spinner {
1503         height: 20px;
1504         width: 20px;
1505         display: inline-block;
1506         visibility: hidden;
1507         background: url(../images/spinner.gif) no-repeat center;
1508         -webkit-background-size: 20px 20px;
1509         background-size: 20px 20px;
1510         opacity: 0.7;
1511         filter: alpha(opacity=70);
1512         line-height: 1;
1513         vertical-align: middle;
1514 }
1515
1516 @media print,
1517         (-webkit-min-device-pixel-ratio: 1.25),
1518         (min-resolution: 120dpi) {
1519
1520         .spinner {
1521                 background-image: url(../images/spinner-2x.gif);
1522         }
1523 }
1524
1525 .spinner.is-active {
1526         visibility: visible;
1527 }
1528
1529 /* Make the text inside the editor textarea white. Prevents a "flash" on loading the page */
1530 #pressthis {
1531         color: #fff;
1532 }
1533
1534 @media (min-width: 901px) {
1535         .editor {
1536                 max-width: 760px;
1537         }
1538 }
1539
1540 @media (max-width: 320px) {
1541         .editor {
1542                 padding: 0;
1543         }
1544 }
1545
1546 .post-title,
1547 .post-title-placeholder {
1548         margin: 0;
1549         padding: .83em 0;
1550         width: 100%;
1551         border-bottom: 1px solid #e5e5e5;
1552         font-size: 32px;
1553         line-height: 1.4;
1554         font-weight: 700;
1555 }
1556
1557 .post-title:active,
1558 .post-title:focus,
1559 .post-title-placeholder:active,
1560 .post-title-placeholder:focus {
1561         outline: 0;
1562         -webkit-box-shadow: inset 0px -3px 0 #00a0d2;
1563         box-shadow: inset 0px -3px 0 #00a0d2;
1564         border-color: #00a0d2;
1565 }
1566
1567 @media (max-width: 900px) {
1568         .post-title,
1569         .post-title-placeholder {
1570                 font-size: 24px;
1571         }
1572 }
1573
1574 @media (max-height: 400px) {
1575         .post-title,
1576         .post-title-placeholder {
1577                 padding: 15px 0;
1578                 font-size: 16px;
1579         }
1580 }
1581
1582 @media (max-width: 320px) {
1583         .post-title,
1584         .post-title-placeholder {
1585                 font-size: 16px;
1586                 font-weight: 600;
1587                 padding: 1.14286em 1.42857em;
1588         }
1589 }
1590
1591 .post-title {
1592         /* IE8 fallback */
1593         background: url(data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==);
1594         background: none, none;
1595 }
1596
1597 .post-title:before {
1598         /* Keeps empty container from collapsing */
1599         content: '\a0';
1600         display: inline-block;
1601         width: 0;
1602         speak: none;
1603 }
1604
1605 .post-title-placeholder {
1606         position: absolute;
1607         border: 0;
1608         color: #9ea7af;
1609         z-index: -1;
1610 }
1611
1612 .post-title-placeholder.is-hidden {
1613         display: none;
1614 }
1615
1616 /* Suggested images */
1617 .media-list-container {
1618         position: relative;
1619         padding: 2px 0;
1620         border-bottom: 1px solid #e5e5e5;
1621         display: none;
1622 }
1623
1624 .media-list-inner-container {
1625         overflow: auto;
1626         max-height: 150px;
1627         max-height: 40vw;
1628 }
1629
1630 .media-list-container.has-media {
1631         display: block;
1632 }
1633
1634 .media-list-inner-container:before,
1635 .media-list-inner-container:after {
1636         content: "";
1637         display: table;
1638 }
1639
1640 .media-list-inner-container:after {
1641         clear: both;
1642 }
1643
1644 .media-list {
1645         margin: 0;
1646         padding: 0;
1647 }
1648
1649 @media (min-width: 321px) {
1650         .media-list-inner-container {
1651                 max-height: 250px;
1652                 max-height: 40vw;
1653         }
1654 }
1655
1656 @media (min-width: 601px) {
1657         .media-list-inner-container {
1658                 max-height: 200px;
1659                 max-height: 18.75vw;
1660         }
1661 }
1662
1663 .wppt-all-media-list {
1664         list-style: none;
1665         margin: 0;
1666         padding: 0;
1667 }
1668
1669 .suggested-media-thumbnail:focus,
1670 .is-embed:focus {
1671         outline: 0;
1672         -webkit-box-shadow: inset 0 0 0 3px #00a0d2;
1673         box-shadow: inset 0 0 0 3px #00a0d2;
1674 }
1675
1676 .suggested-media-thumbnail {
1677         position: relative;
1678         display: block;
1679         float: left;
1680         width: 16.66%;
1681         padding: 16.66% 0 0 16.66%;
1682         background-position: center;
1683         background-repeat: no-repeat;
1684         -webkit-background-size: cover;
1685         background-size: cover;
1686         background-color: #d8d8d8;
1687         color: #fff;
1688         color: rgba(255, 255, 255, 0.6);
1689         cursor: pointer;
1690 }
1691
1692 .suggested-media-thumbnail:hover,
1693 .suggested-media-thumbnail:active,
1694 .suggested-media-thumbnail:focus {
1695         color: #fff;
1696 }
1697
1698 .suggested-media-thumbnail:before,
1699 .suggested-media-thumbnail:after {
1700         display: inline-block;
1701         position: absolute;
1702         font-size: 20px;
1703         line-height: 1;
1704         font-family: dashicons;
1705         text-decoration: inherit;
1706         font-weight: 400;
1707         font-style: normal;
1708         -webkit-transition: color .1s ease-in 0;
1709         transition: color .1s ease-in 0;
1710         -webkit-font-smoothing: antialiased;
1711         -moz-osx-font-smoothing: grayscale;
1712 }
1713
1714 .suggested-media-thumbnail:before {
1715         left: 50%;
1716         top: 50%;
1717         margin: -20px 0 0 -20px;
1718         font-size: 40px;
1719 }
1720
1721 .suggested-media-thumbnail:after {
1722         content: "\f132";
1723         right: 3%;
1724         bottom: 2%;
1725 }
1726
1727 @media (min-width: 601px) {
1728         .suggested-media-thumbnail {
1729                 width: 12.5%;
1730                 padding: 12.5% 0 0 12.5%;
1731         }
1732 }
1733
1734 .is-embed:before {
1735         content: "\f104";
1736         color: #fff;
1737         color: rgba(255, 255, 255, 0.9);
1738 }
1739
1740 .is-embed.is-audio:hover:before,
1741 .is-embed.is-audio:active:before,
1742 .is-embed.is-audio:focus:before,
1743 .is-embed.is-tweet:hover:before,
1744 .is-embed.is-tweet:active:before,
1745 .is-embed.is-tweet:focus:before {
1746         color: #fff;
1747 }
1748
1749 .is-embed.is-video {
1750         background-color: #23282d;
1751 }
1752
1753 .is-embed.is-video:hover:before,
1754 .is-embed.is-video:active:before,
1755 .is-embed.is-video:focus:before {
1756         color: rgba(255, 255, 255, 0.2);
1757 }
1758
1759 .is-embed.is-video:before {
1760         content: "\f236";
1761 }
1762
1763 .is-embed.is-audio {
1764         background-color: #ff7d44;
1765 }
1766
1767 .is-embed.is-audio:before {
1768         content: "\f127";
1769 }
1770
1771 .is-embed.is-tweet {
1772         background-color: #55acee;
1773 }
1774
1775 .is-embed.is-tweet:before {
1776         content: "\f301";
1777 }
1778
1779 .no-media {
1780         margin: 0;
1781         padding: 0;
1782         border: 0;
1783 }
1784
1785 /* Actions bar */
1786 .press-this-actions {
1787         position: fixed;
1788         bottom: 0;
1789         left: 0;
1790         width: 100%;
1791         background: #f1f1f1;
1792         background: rgba(241, 241, 241, 0.9);
1793         border-top: 1px solid #e5e5e5;
1794 }
1795
1796 @media (max-width: 900px) {
1797         .press-this-actions {
1798                 -webkit-transform: translateY(0);
1799                 -ms-transform: translateY(0);
1800                 transform: translateY(0);
1801                 -webkit-transition: -webkit-transform .3s ease-in-out;
1802                 transition: transform .3s ease-in-out;
1803         }
1804         .press-this-actions.is-hidden {
1805                 -webkit-transform: translateY(100%);
1806                 -ms-transform: translateY(100%);
1807                 transform: translateY(100%);
1808         }
1809 }
1810
1811 .add-media {
1812         float: left;
1813         margin: 14px 0 14px 30px;
1814         font-size: 0;
1815 }
1816
1817 @media (max-width: 320px) {
1818         .add-media {
1819                 margin: 10px 0 10px 10px;
1820         }
1821 }
1822
1823 .insert-media {
1824         color: #9ea7af;
1825         float: left;
1826         margin: 0;
1827         padding: 0;
1828         border: 0;
1829         border-right: 1px solid #e5e5e5;
1830         -webkit-border-radius: 0;
1831         border-radius: 0;
1832         background: none;
1833         -webkit-box-shadow: none;
1834         box-shadow: none;
1835         overflow: hidden;
1836 }
1837
1838 .insert-media:hover,
1839 .insert-media:focus,
1840 .insert-media:active {
1841         margin: 0;
1842         background: none;
1843         border-color: #e5e5e5;
1844         color: #23282d;
1845 }
1846
1847 .insert-media:focus,
1848 .insert-media:active {
1849         outline: 0;
1850         color: #00a0d2;
1851         text-decoration: none;
1852 }
1853
1854 .insert-media .dashicons {
1855         padding: 11px;
1856         width: 63px;
1857         height: 58px;
1858         font-size: 40px;
1859 }
1860
1861 @media (max-width: 320px) {
1862         .insert-media .dashicons {
1863                 width: 55px;
1864                 height: 49px;
1865                 padding: 14px;
1866                 font-size: 20px;
1867         }
1868 }
1869
1870 .post-actions {
1871         float: right;
1872         margin: 14px 30px 14px 0;
1873         font-size: 13px;
1874 }
1875
1876 @media (max-width: 320px) {
1877         .post-actions {
1878                 margin: 10px 10px 10px 0;
1879         }
1880 }
1881
1882 .edit-post-link {
1883         font-size: 13px;
1884         display: inline-block;
1885         text-decoration: none;
1886         padding: 0 10px;
1887 }
1888
1889 .publish-button .saving-draft,
1890 .publish-button.is-saving .publish {
1891         display: none;
1892 }
1893
1894 .publish-button.is-saving .saving-draft {
1895         display: inline;
1896 }
1897
1898 /* TinyMCE styles */
1899 .editor .wp-media-buttons {
1900         float: none;
1901 }
1902
1903 .editor div.mce-toolbar-grp {
1904         padding: 0.71429em 0;
1905         background: none;
1906         border: 0;
1907 }
1908
1909 @media (max-height: 400px), (max-width: 320px) {
1910         .editor div.mce-toolbar-grp {
1911                 padding: 0;
1912         }
1913 }
1914
1915 .mce-stack-layout:before,
1916 .mce-stack-layout:after {
1917         content: "";
1918         display: table;
1919 }
1920
1921 .mce-stack-layout:after {
1922         clear: both;
1923 }
1924
1925 .mce-container.mce-toolbar {
1926         float: left;
1927 }
1928
1929 .mce-container.mce-toolbar:nth-child(2) {
1930         float: right;
1931 }
1932
1933 @media (max-width: 600px) {
1934         .mce-first .mce-btn:nth-child(3),
1935         .mce-first .mce-btn:nth-child(4) {
1936                 position: absolute;
1937                 margin: -1px;
1938                 padding: 0;
1939                 height: 1px;
1940                 width: 1px;
1941                 overflow: hidden;
1942                 clip: rect(0 0 0 0);
1943                 border: 0;
1944         }
1945
1946         .mce-first .mce-btn:nth-child(3):focus,
1947         .mce-first .mce-btn:nth-child(4):focus {
1948                 position: static;
1949                 margin: 1px;
1950                 padding: inherit;
1951                 height: auto;
1952                 width: auto;
1953                 overflow: visible;
1954                 clip: auto;
1955                 border: 1px solid #999;
1956         }
1957 }
1958
1959 #wp-link-wrap {
1960         font-size: 13px;
1961 }
1962
1963 #wp-link-wrap input[type="text"] {
1964         padding: 3px 5px;
1965         margin: 1px;
1966 }
1967
1968 @media screen and (max-width: 782px) {
1969         #wp-link-wrap {
1970                 font-size: 14px;
1971         }
1972
1973         #wp-link-wrap input[type="text"] {
1974                 padding: 6px 10px;
1975         }
1976 }
1977
1978 #wp-link-wrap .howto {
1979         color: #666;
1980         font-style: italic;
1981 }
1982
1983 /* Options panel (sidebar) */
1984 .options-panel {
1985         position: relative;
1986         float: right;
1987         margin-right: -320px;
1988         width: 320px;
1989         border-left: 1px solid #e5e5e5;
1990         font-size: 14px;
1991         /* Keeps background the full height of the screen, but only visually. Clicks go through. */
1992         -webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
1993         box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
1994         outline: 0;
1995 }
1996
1997 .options-panel-back {
1998         position: absolute;
1999         top: 0;
2000         right: 0;
2001         bottom: 0;
2002         width: 320px;
2003         outline: 0;
2004 }
2005
2006 @media (max-width: 900px) {
2007         .options-panel {
2008                 background: #fff;
2009                 -webkit-transform: translateX(-100%);
2010                 -ms-transform: translateX(-100%);
2011                 transform: translateX(-100%);
2012                 -webkit-transition: -webkit-transform .3s ease-in-out;
2013                 transition: transform .3s ease-in-out;
2014         }
2015
2016         .options-panel.is-hidden {
2017                 visibility: hidden;
2018         }
2019
2020         .options-panel.is-off-screen {
2021                 -webkit-transform: translateX(0);
2022                 -ms-transform: translateX(0);
2023                 transform: translateX(0);
2024         }
2025 }
2026
2027 @media (max-width: 320px) {
2028         .options-panel {
2029                 margin-right: -100%;
2030                 width: 100%;
2031                 border: 0;
2032                 -webkit-box-shadow: 5001px 5000px 0 5000px #fff;
2033                 box-shadow: 5001px 5000px 0 5000px #fff;
2034         }
2035
2036         .options-panel-back {
2037                 width: 100%;
2038         }
2039 }
2040
2041 .post-options {
2042         background: #fff;
2043         position: absolute;
2044         right: 0;
2045         width: 100%;
2046         overflow-x: hidden;
2047 }
2048
2049 .post-options .post-option-contents {
2050         margin-left: 3px;
2051         color: #32373c;
2052 }
2053
2054 .post-option-forward:before {
2055         position: absolute;
2056         top: 50%;
2057         right: 8px;
2058         margin-top: -10px;
2059         content: "\f345"
2060 }
2061
2062 .post-option-back:before {
2063         content: "\f341";
2064 }
2065
2066 .lt-ie9 .options-panel,
2067 .lt-ie9 .post-options {
2068         border-left: 1px solid #e5e5e5;
2069 }
2070
2071 .lt-ie9 .post-options.is-off-screen {
2072         border: 0;
2073 }
2074
2075 .post-option {
2076         position: relative;
2077 }
2078
2079 .post-options .post-option {
2080         display: block;
2081         width: 100%;
2082         padding: 13px 37px 13px 14px;
2083         border-bottom: 1px solid #e5e5e5;
2084         text-decoration: none;
2085         text-align: left;
2086         color: #9ea7af;
2087         text-overflow: ellipsis;
2088         white-space: nowrap;
2089         overflow: hidden;
2090         -webkit-transition: -webkit-transform .3s ease-in-out;
2091         transition: transform .3s ease-in-out;
2092 }
2093
2094 .post-options .post-option:focus {
2095         outline: 0;
2096         -webkit-box-shadow: inset 5px 0 0 #00a0d2;
2097         box-shadow: inset 5px 0 0 #00a0d2;
2098 }
2099
2100 .is-off-screen > .post-option {
2101         right: 100%;
2102 }
2103
2104 .is-hidden > .post-option {
2105         visibility: hidden;
2106 }
2107
2108 @media (min-width: 1px) {
2109         .is-off-screen > .post-option {
2110                 right: auto;
2111                 -webkit-transform: translateX(-100%);
2112                 -ms-transform: translateX(-100%);
2113                 transform: translateX(-100%);
2114         }
2115 }
2116
2117 .post-option-title {
2118         display: inline-block;
2119         margin: 0 0 0 8px;
2120         font-size: 14px;
2121         font-weight: normal;
2122 }
2123
2124 .setting-modal {
2125         position: relative;
2126         top: 0;
2127         left: 0;
2128         width: 100%;
2129         overflow: hidden;
2130         -webkit-transition: -webkit-transform .3s ease-in-out;
2131         transition: transform .3s ease-in-out;
2132 }
2133
2134 .setting-modal.is-hidden {
2135         visibility: hidden;
2136         height: 0;
2137 }
2138
2139 .setting-modal.is-off-screen {
2140         left: 100%;
2141 }
2142
2143 @media (min-width: 1px) {
2144         .setting-modal.is-off-screen {
2145                 left: 0;
2146                 -webkit-transform: translateX(100%);
2147                 -ms-transform: translateX(100%);
2148                 transform: translateX(100%);
2149         }
2150 }
2151
2152 .modal-close {
2153         display: block;
2154         width: 100%;
2155         padding: 13px 14px;
2156         border-bottom: 1px solid #e5e5e5;
2157         color: #00a0d2;
2158         text-decoration: none;
2159         text-align: left;
2160 }
2161
2162 .modal-close:focus {
2163         outline: 0;
2164         -webkit-box-shadow: inset 5px 0 0 #00a0d2;
2165         box-shadow: inset 5px 0 0 #00a0d2;
2166 }
2167
2168 .setting-title {
2169         position: relative;
2170         top: -1px;
2171         margin-left: 11px;
2172 }
2173
2174 /* Text editor */
2175 #pressthis {
2176         color: #404040;
2177         resize: none;
2178         padding-top: 30px;
2179         font-size: 16px;
2180 }
2181
2182 .wp-editor-wrap .quicktags-toolbar {
2183         background: transparent;
2184         border: none;
2185 }
2186
2187 /* Switch editor buttons */
2188 .wp-editor-wrap .wp-editor-tools {
2189         z-index: 0;
2190 }
2191
2192 .wp-editor-wrap .wp-editor-tabs {
2193         padding: 2px;
2194 }
2195
2196 .wp-editor-wrap .wp-switch-editor {
2197         top: 0;
2198         margin: 3px 0 0 5px;
2199         padding: 3px 8px;
2200         background: #f5f5f5;
2201         color: #555;
2202         border-color: #ccc;
2203 }
2204
2205 .wp-editor-wrap .wp-switch-editor:hover {
2206         background: #fafafa;
2207         border-color: #999;
2208         color: #23282d;
2209 }
2210
2211 .wp-editor-wrap.tmce-active .switch-tmce,
2212 .wp-editor-wrap.html-active .switch-html {
2213         background: #fff;
2214         border-color: #d8d8d8;
2215 }