wp-admin/css/forms.css

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