wp-admin/css/forms.css

   1 /* Include margin and padding in the width calculation of input and textarea. */
   2 input,
   3 textarea {
   4         -webkit-box-sizing: border-box;
   5         -moz-box-sizing: border-box;
   6         box-sizing: border-box;
   7 }
   8
   9 input[type="text"],
  10 input[type="password"],
  11 input[type="checkbox"],
  12 input[type="color"],
  13 input[type="date"],
  14 input[type="datetime"],
  15 input[type="datetime-local"],
  16 input[type="email"],
  17 input[type="month"],
  18 input[type="number"],
  19 input[type="password"],
  20 input[type="search"],
  21 input[type="radio"],
  22 input[type="tel"],
  23 input[type="text"],
  24 input[type="time"],
  25 input[type="url"],
  26 input[type="week"],
  27 select,
  28 textarea {
  29         border: 1px solid #ddd;
  30         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
  31         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
  32         background-color: #fff;
  33         color: #333;
  34         outline: none;
  35         -webkit-transition: 0.05s border-color ease-in-out;
  36         transition: 0.05s border-color ease-in-out;
  37 }
  38
  39 input[type="text"]:focus,
  40 input[type="password"]:focus,
  41 input[type="color"]:focus,
  42 input[type="date"]:focus,
  43 input[type="datetime"]:focus,
  44 input[type="datetime-local"]:focus,
  45 input[type="email"]:focus,
  46 input[type="month"]:focus,
  47 input[type="number"]:focus,
  48 input[type="password"]:focus,
  49 input[type="search"]:focus,
  50 input[type="tel"]:focus,
  51 input[type="text"]:focus,
  52 input[type="time"]:focus,
  53 input[type="url"]:focus,
  54 input[type="week"]:focus,
  55 input[type="checkbox"]:focus,
  56 input[type="radio"]:focus,
  57 select:focus,
  58 textarea:focus {
  59         border-color: #5b9dd9;
  60         -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
  61         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
  62 }
  63
  64 /* @noflip */
  65 input[type="email"],
  66 input[type="url"] {
  67         direction: ltr;
  68 }
  69
  70 input[type="checkbox"],
  71 input[type="radio"] {
  72         border: 1px solid #bbb;
  73         background: #fff;
  74         color: #555;
  75         clear: none;
  76         cursor: pointer;
  77         display: inline-block;
  78         line-height: 0;
  79         height: 16px;
  80         margin: -4px 4px 0 0;
  81         outline: 0;
  82         padding: 0 !important;
  83         text-align: center;
  84         vertical-align: middle;
  85         width: 16px;
  86         min-width: 16px;
  87         -webkit-appearance: none;
  88         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  89         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  90         -webkit-transition: .05s border-color ease-in-out;
  91         transition: .05s border-color ease-in-out;
  92 }
  93
  94 input[type="radio"]:checked + label:before {
  95         color: #888;
  96 }
  97
  98 .wp-core-ui input[type="reset"]:hover,
  99 .wp-core-ui input[type="reset"]:active {
 100         color: #2ea2cc;
 101 }
 102
 103 td > input[type="checkbox"],
 104 .wp-admin p input[type="checkbox"],
 105 .wp-admin p input[type="radio"] {
 106         margin-top: 0;
 107 }
 108
 109 .wp-admin p label input[type="checkbox"] {
 110         margin-top: -4px;
 111 }
 112
 113 .wp-admin p label input[type="radio"] {
 114         margin-top: -2px;
 115 }
 116
 117 input[type="radio"] {
 118         -webkit-border-radius: 50%;
 119         border-radius: 50%;
 120         margin-right: 4px;
 121         line-height: 10px;
 122 }
 123
 124 input[type="checkbox"]:checked:before,
 125 input[type="radio"]:checked:before {
 126         float: left;
 127         display: inline-block;
 128         vertical-align: middle;
 129         width: 16px;
 130         font: normal 21px/1 'dashicons';
 131         speak: none;
 132         -webkit-font-smoothing: antialiased;
 133         -moz-osx-font-smoothing: grayscale;
 134 }
 135
 136 input[type="checkbox"]:checked:before {
 137         content: '\f147';
 138         margin: -3px 0 0 -4px;
 139         color: #1e8cbe;
 140 }
 141
 142 input[type="radio"]:checked:before {
 143         content: '\2022';
 144         text-indent: -9999px;
 145         -webkit-border-radius: 50px;
 146         border-radius: 50px;
 147         font-size: 24px;
 148         width: 6px;
 149         height: 6px;
 150         margin: 4px;
 151         line-height: 16px;
 152         background-color: #1e8cbe;
 153 }
 154
 155 @-moz-document url-prefix() {
 156         input[type="checkbox"],
 157         input[type="radio"],
 158         .form-table input.tog {
 159                 margin-bottom: -1px;
 160         }
 161 }
 162
 163 /* Search */
 164 input[type="search"] {
 165         -webkit-appearance: textfield;
 166 }
 167
 168 input[type="search"]::-webkit-search-decoration {
 169         display: none;
 170 }
 171
 172 .ie8 input[type="password"] {
 173         font-family: sans-serif;
 174 }
 175
 176 textarea,
 177 input,
 178 select,
 179 button {
 180         font-family: inherit;
 181         font-size: inherit;
 182         font-weight: inherit;
 183 }
 184
 185 textarea,
 186 input,
 187 select {
 188         font-size: 14px;
 189         padding: 3px 5px;
 190         -webkit-border-radius: 0;
 191         border-radius: 0; /* Reset mobile webkit's default element styling */
 192 }
 193
 194 textarea {
 195         overflow: auto;
 196         padding: 2px 6px;
 197         line-height: 1.4;
 198 }
 199
 200 .wp-admin input[type="file"] {
 201         padding: 3px 0;
 202 }
 203
 204 label {
 205         cursor: pointer;
 206 }
 207
 208 input,
 209 select {
 210         margin: 1px;
 211         padding: 3px 5px;
 212 }
 213
 214 input.code {
 215         padding-top: 6px;
 216 }
 217
 218 textarea.code {
 219         line-height: 1.4;
 220         padding: 4px 6px 1px 6px;
 221 }
 222
 223 input.readonly,
 224 input[readonly],
 225 textarea.readonly,
 226 textarea[readonly] {
 227         background-color: #eee;
 228 }
 229
 230 :-moz-placeholder,
 231 .wp-core-ui :-moz-placeholder {
 232    color: #a9a9a9;
 233 }
 234
 235 .form-invalid {
 236         background-color: #ffebe8 !important;
 237 }
 238
 239 .form-invalid input,
 240 .form-invalid select {
 241         border-color: #c00 !important;
 242 }
 243
 244 .form-input-tip {
 245         color: #666;
 246 }
 247
 248 input:disabled,
 249 input.disabled,
 250 select:disabled,
 251 select.disabled,
 252 textarea:disabled,
 253 textarea.disabled {
 254         background: rgba( 255, 255, 255, 0.5 );
 255         border-color: rgba( 222, 222, 222, 0.75 );
 256         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 257         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 258         color: rgba( 51, 51, 51, 0.5 );
 259 }
 260
 261 input[type="file"]:disabled,
 262 input[type="file"].disabled,
 263 input[type="range"]:disabled,
 264 input[type="range"].disabled {
 265         background: none;
 266         -webkit-box-shadow: none;
 267         box-shadow: none;
 268 }
 269
 270 input[type="checkbox"]:disabled,
 271 input[type="checkbox"].disabled,
 272 input[type="radio"]:disabled,
 273 input[type="radio"].disabled,
 274 input[type="checkbox"]:disabled:checked:before,
 275 input[type="checkbox"].disabled:checked:before,
 276 input[type="radio"]:disabled:checked:before,
 277 input[type="radio"].disabled:checked:before {
 278         opacity: 0.7;
 279 }
 280
 281 /*------------------------------------------------------------------------------
 282   2.0 - Forms
 283 ------------------------------------------------------------------------------*/
 284
 285
 286 .wp-admin select {
 287         padding: 2px;
 288         line-height: 28px;
 289         height: 28px;
 290         vertical-align: middle;
 291 }
 292
 293 .wp-admin .button-cancel {
 294         padding: 0 5px;
 295         line-height: 2;
 296 }
 297
 298 .meta-box-sortables select {
 299         max-width: 100%;
 300 }
 301
 302 .wp-admin select[multiple] {
 303         height: auto;
 304 }
 305
 306 .submit {
 307         padding: 1.5em 0;
 308         margin: 5px 0;
 309         -webkit-border-bottom-left-radius: 3px;
 310         border-bottom-left-radius: 3px;
 311         -webkit-border-bottom-right-radius: 3px;
 312         border-bottom-right-radius: 3px;
 313         border: none;
 314 }
 315
 316 form p.submit a.cancel:hover {
 317         text-decoration: none;
 318 }
 319
 320 p.submit {
 321         text-align: left;
 322         max-width: 100%;
 323         margin-top: 20px;
 324         padding-top: 10px;
 325 }
 326
 327 .textright p.submit {
 328         border: none;
 329         text-align: right;
 330 }
 331
 332 table.form-table + p.submit,
 333 table.form-table + input + p.submit,
 334 table.form-table + input + input + p.submit {
 335         border-top: none;
 336         padding-top: 0;
 337 }
 338
 339 #minor-publishing-actions input,
 340 #major-publishing-actions input,
 341 #minor-publishing-actions .preview {
 342         text-align: center;
 343 }
 344
 345 textarea.all-options,
 346 input.all-options {
 347         width: 250px;
 348 }
 349
 350 input.large-text,
 351 textarea.large-text {
 352         width: 99%;
 353 }
 354
 355 input.regular-text,
 356 #adduser .form-field input {
 357         width: 25em;
 358 }
 359
 360 input.small-text {
 361         width: 50px;
 362         padding: 1px 6px;
 363 }
 364
 365 input[type="number"].small-text {
 366         width: 65px;
 367 }
 368
 369 #doaction,
 370 #doaction2,
 371 #post-query-submit {
 372         margin: 1px 8px 0 0;
 373 }
 374
 375 .tablenav #changeit,
 376 .tablenav #delete_all,
 377 .tablenav #clear-recent-list,
 378 .wp-filter #delete_all {
 379         margin-top: 1px;
 380 }
 381
 382 .tablenav .actions select {
 383         float: left;
 384         margin-right: 6px;
 385         max-width: 200px;
 386 }
 387
 388 .ie8 .tablenav .actions select {
 389         width: 155px;
 390 }
 391
 392 .ie8 .tablenav .actions select#cat {
 393         width: 200px;
 394 }
 395
 396 #timezone_string option {
 397         margin-left: 1em;
 398 }
 399
 400 #upload-form label {
 401         color: #777;
 402 }
 403
 404 label,
 405 #your-profile label + a {
 406         vertical-align: middle;
 407 }
 408
 409 fieldset label,
 410 #your-profile label + a {
 411         vertical-align: middle;
 412 }
 413
 414 .options-media-php label[for*="_size_"],
 415 #misc-publishing-actions label {
 416         vertical-align: baseline;
 417 }
 418
 419 #misc-publishing-actions label[for="post_status"]:before {
 420         content: '\f173';
 421         display: inline-block;
 422         font: normal 20px/1 'dashicons';
 423         speak: none;
 424         left: -1px;
 425         padding: 0 5px 0 0;
 426         position: relative;
 427         top: 0;
 428         text-decoration: none !important;
 429         vertical-align: top;
 430         -webkit-font-smoothing: antialiased;
 431         -moz-osx-font-smoothing: grayscale;
 432 }
 433
 434 #pass-strength-result {
 435         background-color: #eee;
 436         border: 1px solid #ddd;
 437         float: left;
 438         margin: 13px 5px 5px 1px;
 439         padding: 3px 5px;
 440         text-align: center;
 441         width: 200px;
 442         display: none;
 443 }
 444
 445 #pass-strength-result.short {
 446         background-color: #ffa0a0;
 447         border-color: #f04040;
 448 }
 449
 450 #pass-strength-result.bad {
 451         background-color: #ffb78c;
 452         border-color: #ff853c;
 453 }
 454
 455 #pass-strength-result.good {
 456         background-color: #ffec8b;
 457         border-color: #fc0;
 458 }
 459
 460 #pass-strength-result.strong {
 461         background-color: #c3ff88;
 462         border-color: #8dff1c;
 463 }
 464
 465 .indicator-hint {
 466         padding-top: 8px;
 467 }
 468
 469 p.search-box {
 470         float: right;
 471         margin: 0;
 472 }
 473
 474 .network-admin.themes-php p.search-box {
 475         clear: left;
 476 }
 477
 478 .search-box input[name="s"],
 479 .tablenav .search-plugins input[name="s"],
 480 .tagsdiv .newtag {
 481         float: left;
 482         height: 28px;
 483         margin: 0 4px 0 0;
 484 }
 485
 486 input[type="text"].ui-autocomplete-loading {
 487         background: transparent url(../images/loading.gif) no-repeat right center;
 488         visibility: visible;
 489 }
 490
 491 ul#add-to-blog-users {
 492         margin: 0 0 0 14px;
 493 }
 494
 495 .ui-autocomplete-input.open {
 496         -webkit-border-bottom-right-radius: 0;
 497         border-bottom-right-radius: 0;
 498         -webkit-border-bottom-left-radius: 0;
 499         border-bottom-left-radius: 0;
 500 }
 501
 502 .ui-autocomplete {
 503         padding: 0;
 504         margin: 0;
 505         list-style: none;
 506         position: absolute;
 507         z-index: 10000;
 508         -webkit-border-bottom-right-radius: 3px;
 509         border-bottom-right-radius: 3px;
 510         -webkit-border-bottom-left-radius: 3px;
 511         border-bottom-left-radius: 3px;
 512         border: 1px solid #aaa;
 513         background-color: #efefef;
 514 }
 515
 516 .ui-autocomplete li {
 517         margin-bottom: 0;
 518         white-space: nowrap;
 519         text-align: left;
 520 }
 521
 522 .ui-autocomplete li a {
 523         display: block;
 524         height: 100%;
 525         padding: 4px 10px;
 526         color: #444;
 527 }
 528
 529 .ui-autocomplete li a.ui-state-focus {
 530         background-color: #ddd;
 531         cursor: pointer;
 532 }
 533
 534 /*------------------------------------------------------------------------------
 535   15.0 - Comments Screen
 536 ------------------------------------------------------------------------------*/
 537
 538 .form-table {
 539         border-collapse: collapse;
 540         margin-top: 0.5em;
 541         width: 100%;
 542         clear: both;
 543 }
 544
 545 .form-table,
 546 .form-table td,
 547 .form-table th,
 548 .form-table td p,
 549 .form-wrap label {
 550         font-size: 14px;
 551 }
 552
 553 .form-table td {
 554         margin-bottom: 9px;
 555         padding: 15px 10px;
 556         line-height: 1.3;
 557         vertical-align: middle;
 558 }
 559
 560 .form-table th,
 561 .form-wrap label {
 562         color: #222;
 563         font-weight: normal;
 564         text-shadow: none;
 565         vertical-align: baseline;
 566 }
 567
 568 .form-table th {
 569         vertical-align: top;
 570         text-align: left;
 571         padding: 20px 10px 20px 0;
 572         width: 200px;
 573         line-height: 1.3;
 574         font-weight: 600;
 575 }
 576
 577 .form-table th.th-full {
 578         width: auto;
 579         font-weight: 400;
 580 }
 581
 582 .form-table td p {
 583         margin-top: 4px;
 584         margin-bottom: 0;
 585 }
 586
 587 .form-table td fieldset label {
 588         margin: 0.25em 0 0.5em !important;
 589         display: inline-block;
 590 }
 591
 592 .form-table td fieldset label,
 593 .form-table td fieldset p,
 594 .form-table td fieldset li {
 595         line-height: 1.4em;
 596 }
 597
 598 .form-table input.tog,
 599 .form-table input[type="radio"] {
 600         margin-top: -4px;
 601         margin-right: 4px;
 602         float: none;
 603 }
 604
 605 .form-table .pre {
 606         padding: 8px;
 607         margin: 0;
 608 }
 609
 610 table.form-table td .updated {
 611         font-size: 13px;
 612 }
 613
 614 /*------------------------------------------------------------------------------
 615   18.0 - Users
 616 ------------------------------------------------------------------------------*/
 617
 618 #profile-page .form-table textarea {
 619         width: 500px;
 620         margin-bottom: 6px;
 621 }
 622
 623 #profile-page .form-table #rich_editing {
 624         margin-right: 5px
 625 }
 626
 627 #your-profile legend {
 628         font-size: 22px;
 629 }
 630
 631 #display_name {
 632         width: 15em;
 633 }
 634
 635 #createuser .form-field input {
 636         width: 25em;
 637 }
 638
 639 .color-option {
 640         display: inline-block;
 641         width: 24%;
 642         padding: 5px 15px 15px;
 643         -webkit-box-sizing: border-box;
 644         -moz-box-sizing: border-box;
 645         box-sizing: border-box;
 646         margin-bottom: 3px;
 647 }
 648
 649 .color-option:hover,
 650 .color-option.selected {
 651         background: #ddd;
 652 }
 653
 654 .color-palette {
 655         width: 100%;
 656         border-spacing: 0;
 657         border-collapse: collapse;
 658 }
 659 .color-palette td {
 660         height: 20px;
 661         padding: 0;
 662         border: none;
 663 }
 664
 665 .color-option {
 666         cursor: pointer;
 667 }
 668
 669 /*------------------------------------------------------------------------------
 670   19.0 - Tools
 671 ------------------------------------------------------------------------------*/
 672
 673 .tool-box .title {
 674         margin: 8px 0;
 675         font-size: 18px;
 676         font-weight: normal;
 677         line-height: 24px;
 678 }
 679
 680 .pressthis {
 681         margin: 20px 0;
 682 }
 683
 684 .pressthis a,
 685 .pressthis a:hover,
 686 .pressthis a:focus,
 687 .pressthis a:active {
 688         display: inline-block;
 689         position: relative;
 690         cursor: move;
 691         color: #333;
 692         background: #e6e6e6;
 693         -webkit-border-radius: 5px;
 694         border-radius: 5px;
 695         border: 1px solid #b4b4b4;
 696         font-style: normal;
 697         line-height: 16px;
 698         font-size: 14px;
 699         text-decoration: none;
 700 }
 701
 702 .pressthis a:active {
 703         outline: none;
 704 }
 705
 706 .pressthis a:hover:after {
 707         -webkit-transform: skew(20deg) rotate(9deg);
 708         -ms-transform: skew(20deg) rotate(9deg);
 709         transform: skew(20deg) rotate(9deg);
 710         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 711         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 712 }
 713
 714 .pressthis a span {
 715         display: inline-block;
 716         margin: 0px 0 0;
 717         padding: 0px 12px 8px 9px;
 718 }
 719
 720 .pressthis a span:before {
 721         color: #777;
 722         font: normal 20px/1 'dashicons';
 723         content:'\f157';
 724         position: relative;
 725         display: inline-block;
 726         top: 4px;
 727         margin-right: 4px;
 728 }
 729
 730 .pressthis a:after {
 731         content: '';
 732         width: 70%;
 733         height: 55%;
 734         z-index: -1;
 735         position: absolute;
 736         right: 10px;
 737         bottom: 9px;
 738         background: transparent;
 739         -webkit-transform: skew(20deg) rotate(6deg);
 740         -ms-transform: skew(20deg) rotate(6deg);
 741         transform: skew(20deg) rotate(6deg);
 742         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 743         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 744 }
 745
 746 /*------------------------------------------------------------------------------
 747   20.0 - Settings
 748 ------------------------------------------------------------------------------*/
 749
 750 #utc-time, #local-time {
 751         padding-left: 25px;
 752         font-style: italic;
 753 }
 754
 755 .defaultavatarpicker .avatar {
 756         margin: 2px 0;
 757         vertical-align: middle;
 758 }
 759
 760 .options-general-php .spinner {
 761         float: none;
 762         margin: -3px 3px;
 763 }
 764
 765 /* =Media Queries
 766 -------------------------------------------------------------- */
 767
 768 @media screen and ( max-width: 782px ) {
 769         /* Input Elements */
 770         textarea {
 771                 -webkit-appearance: none;
 772         }
 773
 774         input[type=text], input[type="search"],
 775         input[type=password], input[type="number"] {
 776                 -webkit-appearance: none;
 777                 padding: 6px 10px;
 778         }
 779
 780         input.code {
 781                 padding-bottom: 5px;
 782                 padding-top: 10px;
 783         }
 784
 785         input[type="checkbox"], .widefat th input[type="checkbox"] {
 786                 -webkit-appearance: none;
 787                 padding: 10px;
 788         }
 789
 790         .widefat th input[type="checkbox"] {
 791                 margin-bottom: 8px;
 792         }
 793
 794         input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before {
 795                 font: normal 30px/1 'Dashicons';
 796                 margin: -3px -5px;
 797         }
 798
 799         input[type="radio"],
 800         input[type="checkbox"] {
 801                 height: 25px;
 802                 width: 25px;
 803         }
 804
 805         .wp-admin p input[type="checkbox"],
 806         .wp-admin p input[type="radio"] {
 807                 margin-top: -3px;
 808         }
 809
 810         input[type="radio"]:checked:before {
 811                 vertical-align: middle;
 812                 width: 9px;
 813                 height: 9px;
 814                 margin: 7px;
 815                 line-height: 16px;
 816         }
 817
 818         .wp-upload-form input[type="submit"] {
 819                 margin-top: 10px;
 820         }
 821
 822         #wpbody select {
 823                 height: 36px;
 824                 font-size: 16px;
 825         }
 826
 827         .wp-admin .button-cancel {
 828                 padding: 0;
 829                 font-size: 14px;
 830         }
 831
 832         #createuser .form-field input {
 833                 width: 100%;
 834         }
 835
 836         .form-table {
 837                 -webkit-box-sizing: border-box;
 838                 -moz-box-sizing: border-box;
 839                 box-sizing: border-box;
 840         }
 841
 842         .form-table th,
 843         .form-table td {
 844                 display: block;
 845                 width: auto;
 846                 vertical-align: middle;
 847         }
 848
 849         .form-table .color-palette td {
 850                 display: table-cell;
 851                 width: 15px;
 852         }
 853
 854         .form-table table.color-palette {
 855                 margin-right: 10px;
 856         }
 857
 858         textarea,
 859         input {
 860                 font-size: 16px;
 861         }
 862
 863         .form-table td input[type="text"],
 864         .form-table td input[type="password"],
 865         .form-table td select,
 866         .form-table td textarea,
 867         .form-table span.description,
 868         #profile-page .form-table textarea {
 869                 width: 100%;
 870                 font-size: 16px;
 871                 line-height: 1.5;
 872                 padding: 7px 10px;
 873                 display: block;
 874                 max-width: none;
 875                 -webkit-box-sizing: border-box;
 876                 -moz-box-sizing: border-box;
 877                 box-sizing: border-box;
 878         }
 879
 880         #wpbody .form-table td select {
 881                 height: 40px;
 882         }
 883
 884         input[type="text"].small-text,
 885         input[type="search"].small-text,
 886         input[type="password"].small-text,
 887         input[type="number"].small-text,
 888         input[type="number"].small-text,
 889         .form-table input[type="text"].small-text {
 890                 width: auto;
 891                 max-width: 55px;
 892                 display: inline;
 893                 padding: 3px 6px;
 894                 margin: 0 3px;
 895         }
 896
 897         #pass-strength-result {
 898                 width: 100%;
 899                 -webkit-box-sizing: border-box;
 900                 -moz-box-sizing: border-box;
 901                 box-sizing: border-box;
 902                 padding: 8px;
 903         }
 904
 905         p.search-box {
 906                 float: none;
 907                 position: absolute;
 908                 bottom: 0;
 909                 width: 98%;
 910                 height: 90px;
 911                 margin-bottom: 20px;
 912         }
 913
 914         p.search-box input[name="s"] {
 915                 height: auto;
 916                 float: none;
 917                 width: 100%;
 918                 margin-bottom: 10px;
 919                 vertical-align: middle;
 920                 -webkit-appearance: none;
 921         }
 922
 923         p.search-box input[type="submit"] {
 924                 margin-bottom: 10px;
 925         }
 926
 927         .form-table span.description {
 928                 padding: 4px 0 0;
 929                 line-height: 1.4em;
 930         }
 931
 932         .form-table th {
 933                 padding-top: 10px;
 934                 padding-bottom: 0;
 935                 border-bottom: 0;
 936         }
 937
 938         .form-table td {
 939                 padding-top: 8px;
 940                 padding-left: 0;
 941         }
 942
 943         .form-table input.regular-text {
 944                 width: 100%;
 945         }
 946
 947         .form-table label {
 948                 font-size: 14px;
 949         }
 950
 951         .form-table fieldset label {
 952                 display: block;
 953         }
 954
 955         #utc-time {
 956                 margin-top: 10px;
 957         }
 958
 959         #utc-time,
 960         #local-time {
 961                 display: block;
 962                 float: none;
 963                 padding: 0;
 964                 line-height: 2;
 965         }
 966 }
 967
 968 @media only screen and (max-width: 768px) {
 969         .form-field input,
 970         .form-field textarea {
 971                 width: 99%;
 972         }
 973
 974         .form-wrap .form-field {
 975                 padding:0;
 976         }
 977
 978         /* users */
 979         #profile-page .form-table textarea {
 980                 max-width: 400px;
 981                 width: auto;
 982         }
 983 }
 984
 985 /* Smartphone */
 986 @media screen and (max-width: 600px) {
 987         /* Color Picker Options */
 988         .color-option {
 989                 width: 49%;
 990         }
 991 }
 992