Source: /textpattern/admin-themes/classic/assets/css/textpattern.css - 5352 lines - 122873 bytes - Text - Print

Description: Add the correct display in various browsers.

   1  /* ==========================================================================
   2     Styling and layout for all media
   3     ========================================================================== */
   4  /* HTML5 display definitions
   5     ========================================================================== */
   6  /**
   7   * Add the correct display in various browsers.
   8   */
   9  article,
  10  aside,
  11  details,
  12  figcaption,
  13  figure,
  14  footer,
  15  header,
  16  main,
  17  menu,
  18  nav,
  19  section {
  20    display: block;
  21  }
  22  
  23  summary {
  24    display: list-item;
  25  }
  26  
  27  /**
  28   * Add the correct display in IE 11.
  29   */
  30  canvas {
  31    display: inline-block;
  32  }
  33  
  34  template {
  35    display: none;
  36  }
  37  
  38  /**
  39   * Remove tap delay in modern browsers.
  40   */
  41  a,
  42  input,
  43  button {
  44    -ms-touch-action: none;
  45        touch-action: none;
  46  }
  47  
  48  /* Float clearing
  49     ========================================================================== */
  50  /**
  51   * Clearfix using the 'A new micro clearfix hack' method.
  52   *
  53   * More info: http://nicolasgallagher.com/micro-clearfix-hack/
  54   */
  55  .clearfix::after {
  56    display: table;
  57    clear: both;
  58    content: "";
  59  }
  60  
  61  /**
  62   * Basic float clearer.
  63   */
  64  .clear {
  65    clear: both;
  66  }
  67  
  68  /* ==========================================================================
  69     Styling and layout for screen media
  70     ========================================================================== */
  71  @media screen {
  72    /* Links
  73     ========================================================================== */
  74    /**
  75   * 1. Specify link colour.
  76   * 2. Remove default underline style from non-hover state links.
  77   * 3. Interrupt the decoration line to let the shape of the text show through
  78   *    in supported browsers.
  79   * 4. Expanded CSS level 3 `text-decoration` property in supported browsers,
  80   *    older browsers will fallback to legacy `text-decoration` property.
  81   * 5. Hide `.busy` class links when processing AJAX.
  82   */
  83    a {
  84      /* 1 */
  85      color: #996633;
  86      /* 2 */
  87      text-decoration: none;
  88      /* 3 */
  89      -webkit-text-decoration-skip: ink edges;
  90              text-decoration-skip: ink edges;
  91    }
  92    a:hover, a:active {
  93      outline: 0;
  94      color: #b16f2e;
  95      text-decoration: underline;
  96      /* 4 */
  97      text-decoration: #996633 solid underline;
  98    }
  99    a:focus {
 100      outline: thin solid #5b9dd9;
 101    }
 102    a.busy {
 103      /* 5 */
 104      visibility: hidden;
 105    }
 106    /**
 107   * Additional styling for popup help links.
 108   *
 109   * Example HTML:
 110   *
 111   * <a class="pophelp">i</a>
 112   */
 113    .pophelp,
 114    .pophelpsubtle {
 115      padding: 0 0.41666666666667em;
 116      border: 1px solid;
 117      border-radius: 50%;
 118      border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
 119      font-weight: normal;
 120    }
 121    .pophelp:focus,
 122    .pophelpsubtle:focus {
 123      border-color: #5b9dd9;
 124      outline: 0;
 125    }
 126    /**
 127   * Additional styling for popup help links in table headers.
 128   */
 129    .txp-list thead th a.pophelp {
 130      display: inline;
 131      color: #996633;
 132    }
 133    .txp-list thead th a.pophelp:hover {
 134      color: #b16f2e;
 135      text-decoration: underline;
 136    }
 137    .txp-list thead th a.pophelp:focus {
 138      border-color: #5b9dd9;
 139    }
 140    /**
 141   * Reduce risk of render glitches in links on RTL languages.
 142   */
 143    [dir="rtl"] a {
 144      unicode-bidi: embed;
 145    }
 146    /* Typography
 147     ========================================================================== */
 148    /**
 149   * Establish baseline.
 150   */
 151    html {
 152      font-size: 12px;
 153      line-height: 18px;
 154    }
 155    /**
 156   * Global font and colour.
 157   */
 158    body {
 159      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 160    }
 161    /**
 162   * `h1` headings.
 163   *
 164   * Example HTML:
 165   *
 166   * <h1>Heading</h1>
 167   * <h1>
 168   *     Heading
 169   *     <a class="pophelp">i</a>
 170   * </h1>
 171   */
 172    h1 {
 173      margin: 0 0 0.5em;
 174      font-family: Cambria, Georgia, serif;
 175      font-size: 24px;
 176      font-weight: normal;
 177      line-height: 1.25;
 178    }
 179    h1 .pophelp {
 180      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 181      font-size: 12px;
 182    }
 183    /**
 184   * Omit margin below heading on image edit, pages, forms, styles, prefs panels.
 185   */
 186    #page-image .txp-heading,
 187    #page-form .txp-heading,
 188    #page-page .txp-heading,
 189    #page-css .txp-heading,
 190    #page-prefs .txp-heading {
 191      margin-bottom: 0;
 192    }
 193    /**
 194   * `h2` headings.
 195   *
 196   * Example HTML:
 197   *
 198   * <h2>Heading</h2>
 199   * <h2>
 200   *     Heading
 201   *     <a class="pophelp">i</a>
 202   * </h2>
 203   */
 204    h2 {
 205      margin: 0.6666667em 0;
 206      font-family: Cambria, Georgia, serif;
 207      font-size: 18px;
 208      font-weight: normal;
 209      line-height: 1.3333333;
 210    }
 211    h2 .pophelp {
 212      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 213      font-size: 12px;
 214    }
 215    /**
 216   * `h3` headings.
 217   */
 218    h3 {
 219      margin: 0.8571429em 0;
 220      font-family: Cambria, Georgia, serif;
 221      font-size: 14px;
 222      line-height: 1.4285714;
 223    }
 224    h3 a {
 225      font-weight: bold;
 226    }
 227    /**
 228   * Normalize `h4`, `h5` and `h6` headings (these are effectively unused).
 229   */
 230    h4,
 231    h5,
 232    h6 {
 233      margin: 1em 0;
 234      font-size: 12px;
 235    }
 236    /**
 237   * Add the correct font weight in Chrome, Edge, and Safari.
 238   */
 239    b,
 240    strong {
 241      font-weight: bolder;
 242    }
 243    /**
 244   * Add vertical margin to addresses.
 245   */
 246    address {
 247      margin: 1em 0;
 248    }
 249    /**
 250   * Additional styling for blockquotes.
 251   */
 252    blockquote {
 253      margin: 1em 0;
 254      padding: 0 0 0 1em;
 255      border-left: 3px solid #cccccc;
 256    }
 257    /**
 258   * 1. Remove the bottom border in Firefox.
 259   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 260   */
 261    abbr[title] {
 262      /* 1 */
 263      border-bottom: 0;
 264      /* 2 */
 265      text-decoration: underline;
 266      /* 2 */
 267      text-decoration: underline dotted;
 268    }
 269    /**
 270   * Add the correct font style.
 271   */
 272    dfn {
 273      font-style: italic;
 274    }
 275    /**
 276   * Address styling not present in IE 8/9.
 277   */
 278    mark,
 279    var {
 280      padding: 0 0.2em;
 281      background: #e3edfc;
 282      color: #333333;
 283    }
 284    /**
 285   * Harmonize size and style of computer text.
 286   */
 287    pre,
 288    code,
 289    kbd,
 290    samp,
 291    .code {
 292      font-family: Monaco, "Lucida Console", "Bitstream Vera Sans Mono", "DejaVu Sans Mono", monospace;
 293    }
 294    code,
 295    kbd,
 296    samp {
 297      padding: 0 0.2em;
 298      border: 1px solid #e3e3e3;
 299      background: #f7f7f7;
 300    }
 301    /**
 302   * Additional stylng for preformatted text/code.
 303   *
 304   * 1. Don't wrap long words.
 305   * 2. Contain overflow in all browsers.
 306   * 3. Set tab size to 4 spaces.
 307   */
 308    pre {
 309      margin: 1em 0;
 310      padding: 1em;
 311      border: 1px solid #e3e3e3;
 312      background: #f7f7f7;
 313      /* 1 */
 314      word-wrap: normal;
 315      /* 2 */
 316      overflow-x: auto;
 317      /* 3 */
 318      -moz-tab-size: 4;
 319           tab-size: 4;
 320    }
 321    /**
 322   * Override `code` styling for code display within preformatted text areas and
 323   * form text areas.
 324   */
 325    pre code,
 326    .code code,
 327    code.body,
 328    code.excerpt {
 329      padding: 0;
 330      border: 0;
 331      background: none;
 332      text-align: left;
 333      white-space: pre;
 334      word-spacing: normal;
 335      word-break: normal;
 336      word-wrap: normal;
 337      direction: ltr;
 338      -webkit-hyphens: none;
 339          -ms-hyphens: none;
 340              hyphens: none;
 341    }
 342    /**
 343   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 344   */
 345    sub,
 346    sup.footnote,
 347    sup {
 348      position: relative;
 349      font-size: 0.75em;
 350      line-height: 0;
 351      vertical-align: baseline;
 352    }
 353    sup {
 354      top: -0.5em;
 355    }
 356    sub {
 357      bottom: -0.33333333333333em;
 358    }
 359    /**
 360   * Harmonize size and style of small text.
 361   */
 362    small,
 363    figcaption,
 364    tfoot,
 365    .footnote,
 366    .txp-form-field-instructions {
 367      font-size: 10px;
 368      line-height: 15px;
 369    }
 370    figcaption,
 371    tfoot,
 372    .footnote,
 373    .txp-form-field-instructions {
 374      color: #777777;
 375    }
 376    figcaption {
 377      margin-top: 0.5em;
 378      font-style: italic;
 379    }
 380    /* Support for non-latin languages
 381     ========================================================================== */
 382    /**
 383   * Preferred font for Japanese language.
 384   */
 385    html[lang="ja-jp"] {
 386      font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
 387    }
 388    /**
 389   * Preferred font for Korean language.
 390   */
 391    html[lang="ko-kr"] {
 392      font-family: GulimChe, Gulim, sans-serif;
 393    }
 394    /**
 395   * Preferred font for Chinese (PRC) language.
 396   */
 397    html[lang="zh-cn"] {
 398      font-family: SimHei, sans-serif;
 399    }
 400    /**
 401   * Preferred font for Chinese (Taiwan) language.
 402   */
 403    html[lang="zh-tw"] {
 404      font-family: PMingLiU, sans-serif;
 405    }
 406    /* Embedded content
 407     ========================================================================== */
 408    /**
 409   * Add the correct display in IE 11.
 410   */
 411    audio,
 412    video {
 413      display: inline-block;
 414    }
 415    /**
 416   * Make embedded elements responsive.
 417   */
 418    img,
 419    video {
 420      max-width: 100%;
 421      height: auto;
 422    }
 423    /**
 424   * Images.
 425   *
 426   * 1. Remove the gap between images and the bottom of their containers.
 427   *
 428   * Image alignment (compatible with Textile markup syntax).
 429   *
 430   * Example HTML:
 431   *
 432   * <img class="align-left">
 433   * <img class="align-right">
 434   * <img class="align-center">
 435   */
 436    img {
 437      /* 1 */
 438      vertical-align: middle;
 439    }
 440    img.align-left {
 441      margin: 1em 1em 1em 0;
 442      float: left;
 443    }
 444    img.align-right {
 445      margin: 1em 0 1em 1em;
 446      float: right;
 447    }
 448    img.align-center {
 449      display: block;
 450      margin: 1em auto;
 451    }
 452    /**
 453   * Swap image alignment right/left positions in RTL languages.
 454   */
 455    [dir="rtl"] img.align-left {
 456      margin: 1em 0 1em 1em;
 457      float: right;
 458    }
 459    [dir="rtl"] img.align-right {
 460      margin: 1em 1em 1em 0;
 461      float: left;
 462    }
 463    /**
 464   * Address margin not present in Safari.
 465   */
 466    figure {
 467      margin: 0;
 468    }
 469    /**
 470   * Hide the overflow in IE 11.
 471   */
 472    svg:not(:root) {
 473      overflow: hidden;
 474    }
 475    /**
 476   * Content images and content images with links.
 477   *
 478   * Example HTML:
 479   *
 480   * <a>
 481   *     <img class="content-image">
 482   * </a>
 483   */
 484    .content-image {
 485      border: solid 1px #cccccc;
 486      background: #ffffff;
 487    }
 488    a:hover .content-image {
 489      border-color: #b16f2e;
 490    }
 491    a:focus .content-image {
 492      border-color: #5b9dd9;
 493    }
 494    /* Messages
 495     ========================================================================== */
 496    /**
 497   * Alert labels.
 498   *
 499   * Example HTML:
 500   *
 501   * <span class="success">
 502   * <span class="error">
 503   * <strong class="success">
 504   * <strong class="error">
 505   */
 506    .success {
 507      color: #238c23;
 508    }
 509    .warning {
 510      color: #cc8c00;
 511    }
 512    .error {
 513      color: #9d261d;
 514    }
 515    .information {
 516      color: #3a87ad;
 517    }
 518    /**
 519   * Highlight background.
 520   *
 521   * Example HTML:
 522   *
 523   * <table>
 524   *     <tr>
 525   *         <td class="highlight></td>
 526   *         <td></td>
 527   *     </tr>
 528   * </table>
 529   */
 530    .highlight {
 531      background: #fff8dd;
 532    }
 533    /**
 534   * Alert boxes.
 535   *
 536   * Example HTML:
 537   *
 538   * <p class="alert-block success">
 539   * <p class="alert-block error">
 540   */
 541    .alert-block {
 542      padding: 0.5em 1em;
 543      clear: both;
 544      border: 1px solid;
 545    }
 546    .alert-block.success {
 547      border-color: #a3d48e;
 548      background: #dff0d8;
 549    }
 550    .alert-block.warning {
 551      border-color: #e4c788;
 552      background: #f7eedb;
 553    }
 554    .alert-block.error {
 555      border-color: #e1b2b2;
 556      background: #f2dede;
 557    }
 558    .alert-block.information {
 559      border-color: #b1e2f5;
 560      background: #e7f6fc;
 561    }
 562    /**
 563   * System messages.
 564   *
 565   * Example HTML:
 566   *
 567   * <div id="messagepane">
 568   *     <span role="alert" class="error">
 569   *         Content
 570   *     </span>
 571   * </div>
 572   */
 573    #messagepane {
 574      position: fixed;
 575      top: 0;
 576      left: 50%;
 577      transform: translateX(-50%);
 578      text-align: center;
 579      z-index: 1000;
 580    }
 581    #messagepane span.success, #messagepane span.warning, #messagepane span.error {
 582      display: inline-block;
 583      max-width: 60em;
 584      margin: 0 auto;
 585      padding: 0.5em 3em 0.5em 1em;
 586      border: 1px solid;
 587      border-top: 0;
 588      border-radius: 0 0 0.5em 0.5em;
 589      color: #ffffff;
 590      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 591    }
 592    #messagepane span.success {
 593      border-color: #a3d48e;
 594      background: #238c23;
 595    }
 596    #messagepane span.warning {
 597      border-color: #e4c788;
 598      background: #cc8c00;
 599    }
 600    #messagepane span.error {
 601      border-color: #e1b2b2;
 602      background: #9d261d;
 603    }
 604    /*
 605   * Message close icon.
 606   *
 607   * Example HTML:
 608   *
 609   * <a role="button" class="close" aria-label="Close">&times;</a>
 610   */
 611    .close {
 612      position: absolute;
 613      top: 0.27777777777778em;
 614      right: 0.6666667em;
 615      color: rgba(255, 255, 255, 0.6);
 616      font-size: 18px;
 617      font-weight: bold;
 618      text-decoration: none;
 619    }
 620    .close:hover {
 621      color: rgba(255, 255, 255, 0.8);
 622      text-decoration: none;
 623      cursor: pointer;
 624    }
 625    /*
 626   * Flash the alert message using CSS animation.
 627   */
 628    .messageflash {
 629      animation: messageflash 1s;
 630    }
 631    /* Twisties
 632     ========================================================================== */
 633    /**
 634   * Collapsible and non-collapsible summary/details boxes.
 635   *
 636   * Example HTML:
 637   *
 638   * <section class="txp-details">
 639   *     <h3 class="txp-summary expanded">
 640   *         <a>Heading (lever)</a>
 641   *     </h3>
 642   *     <div class="toggle">
 643   *         Content
 644   *     </div>
 645   * </section>
 646   *
 647   * <section class="txp-details">
 648   *     <h3>Heading</h3>
 649   *     <div>
 650   *         Content
 651   *     </div>
 652   * </section>
 653   */
 654    h3.txp-summary a {
 655      padding: 0 0 0 0.8em;
 656      background: url("../img/expand-collapse.svg") no-repeat 0 4px;
 657    }
 658    h3.txp-summary.expanded a {
 659      background-position: 0 -90px;
 660    }
 661    /* Password strength meter (via zxcvbn.js)
 662     ========================================================================== */
 663    /**
 664   * Strength meter bar area and text area.
 665   *
 666   * Example HTML:
 667   *
 668   * <div class="txp-form-field-value">
 669   *     <input class="txp-maskable" type="password">
 670   *     <div class="strength-meter">
 671   *         <div class="bar password-strength-1" style="width:28%;"></div>
 672   *         <div class="indicator">Strength: poor</div>
 673   *     </div>
 674   *     <div class="edit-admin-show-password">
 675   *         <input class="checkbox" type="checkbox">
 676   *         <label>Show password</label>
 677   *     </div>
 678   * </div>
 679   */
 680    .strength-meter {
 681      position: relative;
 682      width: 100%;
 683      max-width: 28em;
 684      height: 1.5em;
 685      background-color: #a3a3a3;
 686      box-sizing: border-box;
 687    }
 688    .strength-meter:empty {
 689      background-color: transparent;
 690    }
 691    .strength-meter .bar {
 692      position: absolute;
 693      left: 0;
 694      height: 1.5em;
 695      z-index: 2;
 696    }
 697    .strength-meter .indicator {
 698      position: absolute;
 699      padding: 0.16666666666667em 0.41666666666667em;
 700      color: #ffffff;
 701      line-height: 1;
 702      z-index: 3;
 703    }
 704    /**
 705   * Strength level colours.
 706   */
 707    .password-strength-0 {
 708      background-color: #9d261d;
 709    }
 710    .password-strength-1 {
 711      background-color: #b5590f;
 712    }
 713    .password-strength-2 {
 714      background-color: #cc8c00;
 715    }
 716    .password-strength-3 {
 717      background-color: #788c12;
 718    }
 719    .password-strength-4 {
 720      background-color: #238c23;
 721    }
 722    /* Code highlighting (via Prism.js)
 723     ========================================================================== */
 724    code[class*="language-"],
 725    pre[class*="language-"] {
 726      text-align: left;
 727      white-space: pre;
 728      word-spacing: normal;
 729      word-break: normal;
 730      word-wrap: normal;
 731      direction: ltr;
 732      -webkit-hyphens: none;
 733          -ms-hyphens: none;
 734              hyphens: none;
 735    }
 736    /**
 737   * Inline code.
 738   */
 739    :not(pre) > code[class*="language-"] {
 740      white-space: normal;
 741    }
 742    /**
 743   * Syntax colours/styles.
 744   */
 745    .token.comment,
 746    .token.prolog,
 747    .token.doctype,
 748    .token.cdata {
 749      color: #708090;
 750    }
 751    .token.punctuation {
 752      color: #999999;
 753    }
 754    .namespace {
 755      opacity: 0.7;
 756    }
 757    .token.property,
 758    .token.tag,
 759    .token.boolean,
 760    .token.number,
 761    .token.constant,
 762    .token.symbol,
 763    .token.deleted {
 764      color: #990055;
 765    }
 766    .token.selector,
 767    .token.attr-name,
 768    .token.string,
 769    .token.char,
 770    .token.builtin,
 771    .token.inserted {
 772      color: #669900;
 773    }
 774    .token.operator,
 775    .token.entity,
 776    .token.url,
 777    .language-css .token.string,
 778    .style .token.string {
 779      background: rgba(255, 255, 255, 0.5);
 780      color: #a67f59;
 781    }
 782    .token.atrule,
 783    .token.attr-value,
 784    .token.keyword {
 785      color: #0077aa;
 786    }
 787    .token.function {
 788      color: #dd4a68;
 789    }
 790    .token.regex,
 791    .token.important,
 792    .token.variable {
 793      color: #ee9900;
 794    }
 795    .token.important,
 796    .token.bold {
 797      font-weight: bold;
 798    }
 799    .token.italic {
 800      font-style: italic;
 801    }
 802    .token.entity {
 803      cursor: help;
 804    }
 805    /* Forms
 806     ========================================================================== */
 807    /**
 808   * 1. Address width being affected by wide descendants in Chrome, Firefox.
 809   * 2. Define consistent fieldset border, margin, and padding.
 810   */
 811    fieldset {
 812      /* 1 */
 813      min-width: 0;
 814      /* 2 */
 815      margin: 0 0 0.25em;
 816      padding: 1px 0.5em;
 817      border: 1px solid #cccccc;
 818    }
 819    /**
 820   * Normalize styling of `legend`.
 821   *
 822   * 1. Correct wrapping not present in IE 11 and Edge 12/13.
 823   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 824   * 3. Correct `color` not being inherited from fieldset in IE 11.
 825   */
 826    legend {
 827      /* 1 */
 828      display: table;
 829      /* 1 */
 830      max-width: 100%;
 831      margin: 1em 0;
 832      /* 2 */
 833      padding: 0;
 834      /* 3 */
 835      color: #333333;
 836      font-weight: bold;
 837      /* 1 */
 838      white-space: normal;
 839      /* 1 */
 840      box-sizing: border-box;
 841    }
 842    /**
 843   * 1. Prevent elements from spilling out of their parent.
 844   * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
 845   * 3. Correct font properties not being inherited.
 846   */
 847    button,
 848    input,
 849    optgroup,
 850    select,
 851    textarea,
 852    .txp-button,
 853    .navlink,
 854    .navlink-active,
 855    .navlink-disabled {
 856      /* 1 */
 857      max-width: 100%;
 858      /* 2 */
 859      margin: 0;
 860      color: #000000;
 861      font-family: Helvetica, Arial, sans-serif;
 862      /* 3 */
 863      font-size: 12px;
 864      line-height: 1.5em;
 865      vertical-align: baseline;
 866      box-sizing: border-box;
 867    }
 868    /**
 869   * Remove the inner border and padding in Firefox.
 870   */
 871    button::-moz-focus-inner,
 872    [type="button"]::-moz-focus-inner,
 873    [type="reset"]::-moz-focus-inner,
 874    [type="submit"]::-moz-focus-inner {
 875      padding: 0;
 876      border-style: none;
 877    }
 878    /**
 879   * Remove inner padding in Safari and Chrome on OS X. Safari (but not Chrome)
 880   * clips the cancel button when the search input has padding (and `textfield`
 881   * appearance).
 882   */
 883    [type="search"]::-webkit-search-decoration {
 884      -webkit-appearance: none;
 885    }
 886    /**
 887   * Styling of form input fields.
 888   *
 889   * 1. Remove browser-specific default styling.
 890   */
 891    [type="color"],
 892    [type="date"],
 893    [type="datetime"],
 894    [type="datetime-local"],
 895    [type="email"],
 896    [type="month"],
 897    [type="number"],
 898    [type="password"],
 899    [type="search"],
 900    [type="tel"],
 901    [type="text"],
 902    [type="time"],
 903    [type="url"],
 904    [type="week"],
 905    select,
 906    textarea {
 907      height: 2.1666667em;
 908      padding: 0.25em;
 909      border: 1px solid;
 910      border-radius: 0;
 911      border-color: #c7c7c7 #dddddd #dddddd #c7c7c7;
 912      background: #f7f7f7;
 913      /* 1 */
 914      -webkit-appearance: none;
 915         -moz-appearance: none;
 916              appearance: none;
 917    }
 918    [type="color"]:focus,
 919    [type="date"]:focus,
 920    [type="datetime"]:focus,
 921    [type="datetime-local"]:focus,
 922    [type="email"]:focus,
 923    [type="month"]:focus,
 924    [type="number"]:focus,
 925    [type="password"]:focus,
 926    [type="search"]:focus,
 927    [type="tel"]:focus,
 928    [type="text"]:focus,
 929    [type="time"]:focus,
 930    [type="url"]:focus,
 931    [type="week"]:focus,
 932    select:focus,
 933    textarea:focus {
 934      border-color: #5b9dd9;
 935      outline: 0;
 936    }
 937    /**
 938   * Fix vertical alignment of `color` fields with their label.
 939   */
 940    [type="color"] {
 941      vertical-align: middle;
 942    }
 943    /**
 944   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 945   * `font-size` values of the `input`, it causes the cursor style of the
 946   * decrement button to change from `default` to `text`.
 947   */
 948    [type="number"]::-webkit-inner-spin-button,
 949    [type="number"]::-webkit-outer-spin-button {
 950      height: auto;
 951    }
 952    /**
 953   * 1. Remove any excess padding.
 954   * 2. Correct margins for inline checkbox/radio labels.
 955   */
 956    [type="checkbox"],
 957    [type="radio"] {
 958      /* 1 */
 959      padding: 0;
 960    }
 961    [type="checkbox"] + label:not(.ui-controlgroup-item),
 962    [type="radio"] + label:not(.ui-controlgroup-item) {
 963      /* 2 */
 964      margin: 0 0.5em 0 0;
 965    }
 966    [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type,
 967    [type="radio"] + label:not(.ui-controlgroup-item):last-of-type {
 968      /* 2 */
 969      margin: 0;
 970    }
 971    /**
 972   * Swap margin positions in RTL languages.
 973   */
 974    [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item),
 975    [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item) {
 976      margin: 0 0 0 0.5em;
 977    }
 978    [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type,
 979    [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item):last-of-type {
 980      margin: 0;
 981    }
 982    /**
 983   * Use indicator icon to signify the drop-down ability of `select`.
 984   */
 985    select {
 986      padding-right: 1.3333333em;
 987      background: #f7f7f7 url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMXB4JyBoZWlnaHQ9JzRweCcgdmlld0JveD0nMCAwIDExIDQnPjxwb2x5Z29uIGZpbGw9JyMzMzMnIHBvaW50cz0nMy41LDQgMCwwIDcsMCcvPjwvc3ZnPg==") right center no-repeat;
 988      background-size: 0.9166667em 0.3333333;
 989      text-transform: none;
 990    }
 991    /**
 992   * Swap `select` icon position in RTL languages.
 993   */
 994    [dir="rtl"] select {
 995      padding-right: 0.25em;
 996      padding-left: 1.3333333em;
 997      background-position: 0.5em center;
 998    }
 999    /**
1000   * Remove browser-specific `select` UI in IE 11.
1001   */
1002    select::-ms-expand {
1003      opacity: 0;
1004    }
1005    /**
1006   * Remove browser-specific `select` UI in Firefox 4+.
1007   */
1008    select:-moz-focusring {
1009      color: transparent;
1010      text-shadow: 0 0 0 #000000;
1011    }
1012    /**
1013   * Override height and background set in a previous rule and allow auto height.
1014   */
1015    select[size],
1016    select[multiple] {
1017      height: auto;
1018      padding-right: 0.25em;
1019      background-image: none;
1020      vertical-align: top;
1021    }
1022    /**
1023   * Override height set in rule above and restrict to one line field.
1024   */
1025    select[size="0"],
1026    select[size="1"] {
1027      height: 2.1666667em;
1028      vertical-align: baseline;
1029    }
1030    /**
1031   * Normalize styling of `optgroup`.
1032   */
1033    optgroup {
1034      color: #000000;
1035      font-style: normal;
1036      font-weight: bold;
1037    }
1038    /**
1039   * 1. Remove default vertical scrollbar in IE 11.
1040   * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
1041   * 3. Restrict to vertical resizing to prevent layout breakage.
1042   */
1043    textarea {
1044      width: 100%;
1045      height: auto;
1046      min-height: 3em;
1047      /* 1 */
1048      overflow: auto;
1049      /* 2 */
1050      vertical-align: top;
1051      /* 3 */
1052      resize: vertical;
1053    }
1054    /**
1055   * Ensure code text areas are always rendered left-to-right.
1056   */
1057    textarea.code {
1058      direction: ltr;
1059    }
1060    /**
1061   * Make sure disabled elements really are disabled and styled appropriately.
1062   *
1063   * 1. Re-set default cursor for disabled elements.
1064   * 2. Override default iOS opacity setting.
1065   */
1066    [disabled],
1067    [disabled] option,
1068    [disabled] optgroup,
1069    .navlink-disabled {
1070      border-color: #d4d4d4 !important;
1071      background: #eeeeee !important;
1072      color: #aaaaaa !important;
1073      /* 1 */
1074      cursor: default !important;
1075      /* 2 */
1076      opacity: 1;
1077    }
1078    /**
1079   * Width display options for `input` fields.
1080   *
1081   * Example HTML:
1082   *
1083   * <input size="32">
1084   * <input class="large">
1085   * <input class="medium">
1086   * <input class="small">
1087   * <input class="xsmall">
1088   */
1089    input[size="32"] {
1090      width: 100%;
1091      max-width: 30em;
1092    }
1093    input.input-large {
1094      width: 100%;
1095    }
1096    input.input-medium {
1097      width: 50%;
1098      max-width: 15em;
1099    }
1100    input.input-small {
1101      width: 25%;
1102      max-width: 7.5em;
1103    }
1104    input.input-xsmall {
1105      width: 18%;
1106      max-width: 4.5em;
1107    }
1108    /**
1109   * Width display options for date and time `input` fields.
1110   *
1111   * Note: These are intentionally *not* using the HTML5 input type contexts.
1112   *
1113   * Example HTML:
1114   *
1115   * <div class="txp-form-field date posted">
1116   *     <div class="txp-form-field-label">
1117   *         <label>Publish date</label>
1118   *     </div>
1119   *     <div class="txp-form-field-value">
1120   *         <input class="input-year">
1121   *         <span role="separator">/</span>
1122   *         <input class="input-month">
1123   *         <span role="separator">/</span>
1124   *         <input class="input-day">
1125   *     </div>
1126   * </div>
1127   *
1128   * <div class="txp-form-field time posted">
1129   *     <div class="txp-form-field-label">
1130   *         <label>Publish time</label>
1131   *     </div>
1132   *     <div class="txp-form-field-value">
1133   *         <input class="input-hour">
1134   *         <span role="separator">:</span>
1135   *         <input class="input-minute">
1136   *         <span role="separator">:</span>
1137   *         <input class="input-second">
1138   *     </div>
1139   * </div>
1140   */
1141    input.input-year {
1142      width: 4.5em;
1143      text-align: center;
1144    }
1145    input.input-month, input.input-day, input.input-hour, input.input-minute, input.input-second {
1146      width: 2.6666667em;
1147      /* 32px / 12px */
1148      text-align: center;
1149    }
1150    /**
1151   * 1. Add the correct display in IE 11.
1152   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
1153   */
1154    progress {
1155      /* 1 */
1156      display: inline-block;
1157      /* 2 */
1158      vertical-align: baseline;
1159    }
1160    /* Buttons
1161     ========================================================================== */
1162    /**
1163   * 1. Correct `button` style inheritance in Firefox, IE 11, and Opera.
1164   * 2. Address `overflow` set to `hidden` in IE 11.
1165   */
1166    button {
1167      /* 1 */
1168      text-transform: none;
1169      /* 2 */
1170      overflow: visible;
1171    }
1172    /**
1173   * 1. Improve usability and consistency of cursor style between image-type
1174   *    `input` and others.
1175   * 2. Remove iOS Safari default styling.
1176   */
1177    button,
1178    [type="reset"],
1179    [type="submit"],
1180    input[type="button"],
1181    .txp-button,
1182    .txp-logout a,
1183    .navlink,
1184    .navlink-active {
1185      display: inline-block;
1186      width: auto;
1187      height: 2.1666667em;
1188      padding: 0.25em 0.75em;
1189      border: 1px solid;
1190      border-color: #dddddd #c7c7c7 #c7c7c7 #dddddd;
1191      background-clip: padding-box;
1192      background-color: #e2e2e2;
1193      color: #333333;
1194      font-weight: normal;
1195      text-align: center;
1196      /* 1 */
1197      cursor: pointer;
1198      /* 2 */
1199      -webkit-appearance: none;
1200         -moz-appearance: none;
1201              appearance: none;
1202      -webkit-user-select: none;
1203         -moz-user-select: none;
1204          -ms-user-select: none;
1205              user-select: none;
1206    }
1207    button:hover,
1208    [type="reset"]:hover,
1209    [type="submit"]:hover,
1210    input[type="button"]:hover,
1211    .txp-button:hover,
1212    .txp-logout a:hover,
1213    .navlink:hover,
1214    .navlink-active:hover {
1215      border-color: #cccccc #b7b7b7 #b7b7b7 #cccccc;
1216      background-color: #eeeeee;
1217      color: #333333;
1218      text-decoration: none;
1219    }
1220    button:active,
1221    [type="reset"]:active,
1222    [type="submit"]:active,
1223    input[type="button"]:active,
1224    .txp-button:active,
1225    .txp-logout a:active,
1226    .navlink:active,
1227    .navlink-active:active {
1228      border-color: #cccccc #b7b7b7 #b7b7b7 #cccccc;
1229      background-color: #dddddd;
1230      color: #1a1a1a;
1231      text-decoration: none;
1232    }
1233    button:focus,
1234    [type="reset"]:focus,
1235    [type="submit"]:focus,
1236    input[type="button"]:focus,
1237    .txp-button:focus,
1238    .txp-logout a:focus,
1239    .navlink:focus,
1240    .navlink-active:focus {
1241      border-color: #5b9dd9;
1242      outline: 0;
1243    }
1244    /**
1245   * Additional styling for primary buttons.
1246   *
1247   * Example HTML:
1248   *
1249   * <input type="submit" class="publish">
1250   */
1251    [type="submit"].publish,
1252    button.publish,
1253    a.publish {
1254      height: 2.6666667em;
1255      padding: 0.5em 0.75em;
1256      border-color: #bb0000 #660000 #660000 #bb0000;
1257      background-color: #990000;
1258      color: #ffffff;
1259      font-weight: bold;
1260    }
1261    [type="submit"].publish:hover,
1262    button.publish:hover,
1263    a.publish:hover {
1264      background-color: #b70000;
1265    }
1266    [type="submit"].publish:active,
1267    button.publish:active,
1268    a.publish:active {
1269      background-color: #880000;
1270    }
1271    [type="submit"].publish:focus,
1272    button.publish:focus,
1273    a.publish:focus {
1274      border-color: #5b9dd9;
1275    }
1276    /**
1277   * Additional styling for delete (destroy) buttons.
1278   *
1279   * Example HTML:
1280   *
1281   * <button class="destroy" type="submit">
1282   *     <span class="ui-icon ui-icon-close">Destroy</span>
1283   * </button>
1284   */
1285    button.destroy {
1286      height: auto;
1287      padding: 0.08333333em 0 0;
1288      border: 0;
1289      background: none;
1290    }
1291    button.destroy:hover, button.destroy:active {
1292      background: none;
1293    }
1294    button.destroy:focus {
1295      outline: thin solid #5b9dd9;
1296    }
1297    button.destroy:hover .ui-icon,
1298    button.destroy:active .ui-icon,
1299    button.destroy:focus .ui-icon {
1300      -webkit-filter: brightness(0.66);
1301              filter: brightness(0.66);
1302    }
1303    /**
1304   * Grey-out disabled navlinks (but keep them in button style).
1305   *
1306   * Example HTML:
1307   *
1308   * <p class="prev-next">
1309   *     <span class="navlink-disabled">Previous</span>
1310   *     <a class="navlink">Next</a>
1311   * </p>
1312   */
1313    .navlink-disabled {
1314      display: inline-block;
1315      height: 2.1666667em;
1316      padding: 0.25em 0.75em;
1317      border: 1px solid;
1318      background-clip: padding-box;
1319      box-sizing: border-box;
1320    }
1321    /**
1322   * Tertiary button sets.
1323   *
1324   * Anchor elements kept to one line to prevent space between buttons.
1325   *
1326   * Example HTML:
1327   *
1328   * <p class="nav-tertiary">
1329   *     <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a>
1330   * </p>
1331   */
1332    ul.nav-tertiary {
1333      padding: 0;
1334      list-style: none;
1335    }
1336    ul.nav-tertiary li {
1337      display: inline;
1338    }
1339    [dir="rtl"] ul.nav-tertiary {
1340      padding: 0;
1341    }
1342    .navlink-active {
1343      background-color: #fff8dd;
1344    }
1345    .navlink-active:hover {
1346      background-color: #fffdf7;
1347    }
1348    .navlink-active:active {
1349      background-color: #fff0b4;
1350    }
1351    /**
1352   * Search widget 'search' button.
1353   *
1354   * 1. Correct specificity for RTL languages.
1355   *
1356   * Example HTML:
1357   *
1358   * <form class="txp-search">
1359   *     <input class="txp-search-input" type="search" size="24">
1360   *     <span class="txp-search-buttons">
1361   *         <button class="txp-search-button">Search</button>
1362   *         <button class="txp-search-options">Search criteria</button>
1363   *     </span>
1364   * </form>
1365   */
1366    .txp-search button.txp-search-button {
1367      padding-right: 1.5em;
1368      padding-left: 1.5em;
1369    }
1370    /* Lists
1371     ========================================================================== */
1372    /**
1373   * Address paddings set differently.
1374   */
1375    menu,
1376    ol,
1377    ul {
1378      padding: 0 0 0 2.3333333em;
1379    }
1380    /**
1381   * Swap padding positions in RTL languages.
1382   */
1383    [dir="rtl"] menu,
1384    [dir="rtl"] ol,
1385    [dir="rtl"] ul {
1386      padding: 0 2.3333333em 0 0;
1387    }
1388    /**
1389   * Remove margins from nested lists.
1390   */
1391    li > ul,
1392    li > ol {
1393      margin: 0;
1394    }
1395    /**
1396   * Address margins set differently.
1397   */
1398    dd {
1399      margin: 0 0 0 2.3333333em;
1400    }
1401    /**
1402   * Swap margin positions in RTL languages.
1403   */
1404    [dir="rtl"] dd {
1405      margin: 0 2.3333333em 0 0;
1406    }
1407    /**
1408   * Have a list with no bullets/numerals.
1409   *
1410   * Example HTML:
1411   *
1412   * <ul class="plain-list">
1413   * <ol class="plain-list">
1414   */
1415    .plain-list {
1416      padding: 0;
1417      list-style: none;
1418    }
1419    /**
1420   * Ensure padding stays removed in RTL languages.
1421   *
1422   * Required for specificity.
1423   */
1424    [dir="rtl"] .plain-list {
1425      padding: 0;
1426    }
1427    /**
1428   * Switcher lists, to swap between diffrent page templates/form templates/etc.
1429   *
1430   * Example HTML:
1431   *
1432   * <ul class="switcher-list">
1433   *     <li class="active"></li>
1434   *     <li><a></a></li>
1435   *     <li><a></a></li>
1436   * </ul>
1437   */
1438    .switcher-list {
1439      margin: 0;
1440      padding: 0;
1441      list-style: none;
1442    }
1443    .switcher-list li {
1444      position: relative;
1445      border-top: 1px solid #cccccc;
1446      border-bottom: 1px solid transparent;
1447    }
1448    .switcher-list li:last-child {
1449      border-bottom-color: #cccccc;
1450    }
1451    .switcher-list li.active {
1452      background: #fff8dd;
1453    }
1454    .switcher-list li.selected {
1455      background: #e3edfc;
1456    }
1457    .switcher-list a {
1458      display: block;
1459      padding: 0.3333333em 2em 0.3333333em 0;
1460      text-overflow: ellipsis;
1461      white-space: nowrap;
1462      overflow: hidden;
1463    }
1464    [dir="rtl"] .switcher-list {
1465      padding: 0;
1466    }
1467    [dir="rtl"] .switcher-list a {
1468      padding: 0.3333333em 0 0.3333333em 2em;
1469    }
1470    /**
1471   * Multi-edit checkboxes within switcher lists.
1472   */
1473    .switcher-action {
1474      position: absolute;
1475      top: 0.3333333em;
1476      left: 0;
1477      z-index: 2;
1478    }
1479    .switcher-action + a {
1480      padding-right: 0;
1481      padding-left: 2em;
1482    }
1483    [dir="rtl"] .switcher-action {
1484      right: 0;
1485      left: auto;
1486    }
1487    [dir="rtl"] .switcher-action + a {
1488      padding-right: 2em;
1489      padding-left: 0;
1490    }
1491    /**
1492   * 'Destroy' buttons within switcher lists.
1493   */
1494    .switcher-list .destroy {
1495      position: absolute;
1496      top: 0.3333333em;
1497      right: 0;
1498      z-index: 2;
1499    }
1500    [dir="rtl"] .switcher-list .destroy {
1501      right: auto;
1502      left: 0;
1503    }
1504    /* Tables
1505     ========================================================================== */
1506    /**
1507   * 1. Make sure list tables clear any preceeding grid cell floats.
1508   * 2. Allow overflow scroll on tables.
1509   *
1510   * Example HTML:
1511   *
1512   * <div class="txp-listtables">
1513   *     <table></table>
1514   * </div>
1515   */
1516    .txp-listtables {
1517      /* 1 */
1518      clear: both;
1519      /* 2 */
1520      overflow-x: auto;
1521    }
1522    /**
1523   * Consistent tables.
1524   */
1525    table {
1526      border-collapse: collapse;
1527      border-spacing: 0;
1528    }
1529    /**
1530   * Styling of table captions.
1531   */
1532    caption {
1533      margin-bottom: 0.5em;
1534      text-align: left;
1535    }
1536    /**
1537   * Swap caption alignment in RTL languages.
1538   */
1539    [dir="rtl"] caption {
1540      text-align: right;
1541    }
1542    /**
1543   * Table row borders.
1544   */
1545    tbody {
1546      border-top: 1px solid #cccccc;
1547    }
1548    tbody th {
1549      border-bottom: 1px solid #cccccc;
1550    }
1551    tbody td {
1552      border-bottom: 1px solid #cccccc;
1553    }
1554    /**
1555   * Make table cells align top and left by default.
1556   */
1557    th,
1558    td {
1559      padding: 0.3em 1em 0.3em 0;
1560      text-align: left;
1561      vertical-align: top;
1562    }
1563    td:last-child {
1564      padding: 0.3em 0;
1565    }
1566    /**
1567   * Swap table cell text alignments in RTL languages.
1568   */
1569    [dir="rtl"] th,
1570    [dir="rtl"] td {
1571      padding: 0.3em 0 0.3em 1em;
1572      text-align: right;
1573    }
1574    /**
1575   * Align header cell content at bottom of cell.
1576   */
1577    thead th,
1578    thead td {
1579      vertical-align: bottom;
1580    }
1581    /**
1582   * Listing tables.
1583   *
1584   * Example HTML:
1585   *
1586   * <table class="txp-list">
1587   *     <thead>
1588   *         <tr>
1589   *             <th class="multi-edit" scope="col"></th>
1590   *             <th class="asc scope="col"><a></a></th>
1591   *             <th scope="col"><a></a></th>
1592   *         </tr>
1593   *     </thead>
1594   *     <tfoot>
1595   *         <tr>
1596   *             <td colspan="3"></td>
1597   *         </tr>
1598   *     </tfoot>
1599   *     <tbody>
1600   *         <tr>
1601   *             <th class="multi-edit" scope="row"></th>
1602   *             <td></td>
1603   *             <td></td>
1604   *         </tr>
1605   *         <tr class="selected">
1606   *             <th class="multi-edit" scope="row"></th>
1607   *             <td></td>
1608   *             <td></td>
1609   *         </tr>
1610   *     </tbody>
1611   * </table>
1612   */
1613    .txp-list {
1614      width: 100%;
1615    }
1616    .txp-list tbody tr.selected {
1617      background: #e3edfc;
1618    }
1619    .txp-list tbody th {
1620      font-weight: normal;
1621    }
1622    /**
1623   * Backgrounds and indicator icons on currently active sortable `thead th`.
1624   *
1625   * Example HTML:
1626   *
1627   * <th class="asc scope="col"><a></a></th>
1628   * <th class="desc scope="col"><a></a></th>
1629   */
1630    .txp-list thead th a {
1631      margin-right: 14px;
1632    }
1633    [dir="rtl"] .txp-list thead th a {
1634      margin-right: 0;
1635      margin-left: 14px;
1636    }
1637    .txp-list thead th.asc a,
1638    .txp-list thead th.desc a {
1639      margin-right: 0;
1640      padding-right: 14px;
1641      background: url("../img/arrow-up-down.svg") no-repeat;
1642    }
1643    [dir="rtl"] .txp-list thead th.asc a, [dir="rtl"]
1644    .txp-list thead th.desc a {
1645      margin-left: 0;
1646      padding-right: 0;
1647      padding-left: 14px;
1648    }
1649    .txp-list thead th.asc a {
1650      background-position: right 2px;
1651    }
1652    [dir="rtl"] .txp-list thead th.asc a {
1653      background-position: left 2px;
1654    }
1655    .txp-list thead th.desc a {
1656      background-position: right -36px;
1657    }
1658    [dir="rtl"] .txp-list thead th.desc a {
1659      background-position: left -36px;
1660    }
1661    /**
1662   * Consistent width for table multi-edit checkbox columns.
1663   */
1664    .txp-list-col-multi-edit {
1665      width: 13px;
1666    }
1667    /**
1668   * Avoid wrapping of content in table '#ID' columns.
1669   */
1670    .txp-list-col-id {
1671      white-space: nowrap;
1672    }
1673    /* Container
1674     ========================================================================== */
1675    /**
1676   * 1. Make body position relative so subsequent items can be positioned
1677   *    absolutely if desired.
1678   * 2. Remove default margin.
1679   */
1680    body {
1681      display: -ms-flexbox;
1682      display: flex;
1683      /* 1 */
1684      position: relative;
1685      -ms-flex-direction: column;
1686          flex-direction: column;
1687      min-height: 100vh;
1688      /* 2 */
1689      margin: 0;
1690      padding: 0;
1691      background: #ffffff;
1692      color: #333333;
1693      box-sizing: border-box;
1694    }
1695    /**
1696   * Main content area.
1697   *
1698   * Example HTML:
1699   *
1700   * <body>
1701   *     <header class="txp-header"></header>
1702   *     <main class="txp-body">
1703   *         Content
1704   *     </main>
1705   *     <footer class="txp-footer"></footer>
1706   * </body>
1707   */
1708    .txp-body {
1709      -ms-flex-positive: 1;
1710          flex-grow: 1;
1711      min-width: 64em;
1712      max-width: 114em;
1713      margin: 0 auto;
1714      padding: 0 2.5%;
1715      box-sizing: border-box;
1716    }
1717    /* Layout grid
1718     ========================================================================== */
1719    /**
1720   * Flex container.
1721   */
1722    .txp-layout {
1723      display: -ms-flexbox;
1724      display: flex;
1725      -ms-flex-wrap: wrap;
1726          flex-wrap: wrap;
1727      margin: 0 -1em;
1728    }
1729    .txp-layout > * {
1730      min-width: 0;
1731      padding: 0 1em;
1732      box-sizing: border-box;
1733    }
1734    /**
1735   * Generate sizes all for grid column cells.
1736   *
1737   * Example HTML:
1738   *
1739   * <div class="txp-layout-1col"></div>
1740   *
1741   * <div class="txp-layout-2col">
1742   * <div class="txp-layout-2col">
1743   *
1744   * <div class="txp-layout-4col-3span"></div>
1745   * <div class="txp-layout-4col"></div>
1746   */
1747    .txp-layout-1col {
1748      width: 100%;
1749    }
1750    .txp-layout-4col-3span {
1751      width: 75%;
1752    }
1753    .txp-layout-2col,
1754    .txp-layout-4col-2span {
1755      width: 50%;
1756    }
1757    .txp-layout-4col,
1758    .txp-layout-4col-alt {
1759      width: 25%;
1760    }
1761    /**
1762   * Text columns (fixed proportion cell)
1763   *
1764   * Example HTML:
1765   *
1766   * <div class="txp-layout-textbox">
1767   */
1768    .txp-layout-textbox {
1769      max-width: 62em;
1770      margin: 0 auto;
1771    }
1772    /* Inline grids
1773     ========================================================================== */
1774    /**
1775   * Inline grid type layouts.
1776   *
1777   * You should define a specific width for each .txp-grid-cell, either as a class
1778   * attribute or style attribute, otherwise the cell width stretches to the
1779   * content within it.
1780   *
1781   * Example HTML:
1782   *
1783   * <div class="txp-grid">
1784   *     <div class="txp-grid-cell" style="width:30em;">
1785   *         Content
1786   *     </div>
1787   *     <div class="txp-grid-cell" style="width:15em;">
1788   *         Content
1789   *     </div>
1790   *     <div class="txp-grid-cell" style="width:15em;">
1791   *         Content
1792   *     </div>
1793   * </div>
1794   */
1795    .txp-grid {
1796      display: -ms-inline-flexbox;
1797      display: inline-flex;
1798      -ms-flex-wrap: wrap;
1799          flex-wrap: wrap;
1800      -ms-flex-pack: center;
1801          justify-content: center;
1802      margin: -2px;
1803    }
1804    .txp-grid-cell {
1805      margin: 2px;
1806      padding: 0 1em;
1807      border: 1px solid #cccccc;
1808      box-sizing: border-box;
1809    }
1810    /* Header
1811     ========================================================================== */
1812    /**
1813   * Header content area.
1814   *
1815   * Example HTML:
1816   *
1817   * <header class="txp-header">
1818   *     <div class="txp-masthead">
1819   *         <h1 class="txp-branding">Textpattern</h1>
1820   *         <h2 class="txp-accessibility">My site</h2>
1821   *         <form class="navpop" method="get" action="index.php">
1822   *             <select name="event" data-submit-on="change"></select>
1823   *         </form>
1824   *     </div>
1825   *     <nav role="navigation" aria-label="Navigation"></nav>
1826   *     <div id="messagepane"></div>
1827   * </header>
1828   */
1829    .txp-header {
1830      min-width: 64em;
1831      margin-bottom: 1.5em;
1832    }
1833    .txp-masthead {
1834      display: -ms-flexbox;
1835      display: flex;
1836      -ms-flex-pack: justify;
1837          justify-content: space-between;
1838      height: 2.5em;
1839      padding: 0 2.5%;
1840      border-bottom: 1px solid #f8c225;
1841      background-color: #ffda44;
1842    }
1843    .txp-branding {
1844      text-indent: 110%;
1845      text-transform: capitalize;
1846      white-space: nowrap;
1847      overflow: hidden;
1848      width: 6.75em;
1849      height: 1.5em;
1850      margin: 0.25em 0;
1851      background: url("../img/sprite.svg") no-repeat 0 0;
1852      background-size: 11.25em 1.5em;
1853      font-size: 16px;
1854    }
1855    .navpop {
1856      margin: 0.1666667em 0;
1857    }
1858    /* Footer
1859     ========================================================================== */
1860    /**
1861   * Footer content area.
1862   *
1863   * Example HTML:
1864   *
1865   * <footer class="txp-footer">
1866   *     Content
1867   * </footer>
1868   */
1869    .txp-footer {
1870      min-width: 64em;
1871      margin: 1em 0;
1872      padding: 0 2.5%;
1873      text-align: center;
1874      box-sizing: border-box;
1875    }
1876    /* Navigation
1877     ========================================================================== */
1878    /**
1879   * Navigation menu displayed as primary and secondary tabs.
1880   *
1881   * Example HTML:
1882   *
1883   * <nav role="navigation" aria-label="Navigation">
1884   *     <div class="nav-tabs" id="nav-primary">
1885   *         <ul>
1886   *             <li class="active"><a>Content</a></li>
1887   *             <li><a>Presentation</a></li>
1888   *             <li><a>Admin</a></li>
1889   *             <li class="txp-view-site"><a>View site</a></li>
1890   *         </ul>
1891   *     </div>
1892   *     <div class="nav-tabs" id="nav-secondary">
1893   *         <ul>
1894   *             <li><a>Write</a></li>
1895   *             <li class="active"><a>Articles</a></li>
1896   *             <li><a>Images</a></li>
1897   *             <li><a>Files</a></li>
1898   *             <li><a>Links</a></li>
1899   *             <li><a>Categories</a></li>
1900   *             <li><a>Comments</a></li>
1901   *         </ul>
1902   *     </div>
1903   * </nav>
1904   */
1905    .nav-tabs {
1906      text-align: center;
1907    }
1908    .nav-tabs ul {
1909      margin: 0.5em 0 0;
1910      padding: 0;
1911      border-bottom: 1px solid #cccccc;
1912      list-style: none;
1913      box-shadow: inset 0 -0.2em 0.4em rgba(0, 0, 0, 0.15);
1914    }
1915    .nav-tabs li {
1916      display: inline-block;
1917    }
1918    .nav-tabs a {
1919      display: block;
1920      position: relative;
1921      bottom: -1px;
1922      padding: 0.1666667em 1.5em;
1923      border: 1px solid #dbdbdb;
1924      border-top-left-radius: 0.75em 2em;
1925      border-top-right-radius: 0.75em 2em;
1926      border-bottom-color: #cccccc;
1927      background-color: #fff8dd;
1928      color: #333333;
1929      text-decoration: none;
1930      box-shadow: inset 0 -0.2em 0.4em rgba(219, 203, 141, 0.5), 0 -0.15em 0.15em rgba(0, 0, 0, 0.1);
1931    }
1932    .nav-tabs a:hover {
1933      border-color: #aaaaaa;
1934      background-color: #fffdf7;
1935    }
1936    .nav-tabs a:focus {
1937      border-color: #5b9dd9;
1938      outline: none;
1939    }
1940    .nav-tabs .active a {
1941      border-bottom-color: #ffffff;
1942      background-color: #ffffff;
1943      box-shadow: 0 -0.15em 0.15em rgba(0, 0, 0, 0.1);
1944    }
1945    .nav-tabs .active a:focus {
1946      border-color: #5b9dd9;
1947    }
1948    /* Globally shared layout
1949     ========================================================================== */
1950    /**
1951   * 1. Prevent text size adjust after mobile device orientation change.
1952   */
1953    html {
1954      /* 1 */
1955      -webkit-text-size-adjust: 100%;
1956          -ms-text-size-adjust: 100%;
1957              text-size-adjust: 100%;
1958    }
1959    /**
1960   * 1. Add the correct box sizing in Firefox.
1961   * 2. Show the overflow in Edge and IE.
1962   */
1963    hr {
1964      /* 1 */
1965      height: 0;
1966      margin: 1.5em 0;
1967      clear: both;
1968      border: 0;
1969      border-bottom: 1px solid #cccccc;
1970      /* 2 */
1971      overflow: visible;
1972      /* 1 */
1973      box-sizing: content-box;
1974    }
1975    /**
1976   * Hide text but still allow screen reader access.
1977   *
1978   * Example HTML:
1979   *
1980   * <h1 class="txp-accessibility">
1981   */
1982    .txp-accessibility {
1983      position: absolute;
1984      left: -1000em;
1985      width: 1px;
1986      height: 1px;
1987      overflow: hidden;
1988    }
1989    /**
1990   * Swap absolute positions in RTL languages.
1991   *
1992   * This avoids browser scrollbar displaying incorrectly.
1993   */
1994    [dir="rtl"] .txp-accessibility {
1995      right: -1000em;
1996      left: auto;
1997    }
1998    /**
1999   * Ensure dropdowns are hidden at page load (prevents content 'jumping').
2000   */
2001    .txp-dropdown {
2002      display: none;
2003    }
2004    /**
2005   * Search widget at top of lists.
2006   *
2007   * Appears on:
2008   *
2009   * List panels.
2010   *
2011   * Example HTML:
2012   *
2013   * <form class="txp-search">
2014   *     <span class="txp-search-clear"><a>Clear search</a></span>
2015   *     <input class="txp-search-input" type="search" size="24">
2016   *     <span class="txp-search-buttons">
2017   *         <button class="txp-search-button">Search</button>
2018   *         <button class="txp-search-options">Search criteria</button>
2019   *     </span>
2020   * </form>
2021   */
2022    .txp-search {
2023      display: -ms-flexbox;
2024      display: flex;
2025      -ms-flex-pack: end;
2026          justify-content: flex-end;
2027      margin: 1em 0;
2028    }
2029    .txp-search .ui-menu {
2030      position: absolute;
2031      width: 18em;
2032      z-index: 100;
2033    }
2034    .txp-search .ui-controlgroup {
2035      -ms-flex-wrap: nowrap;
2036          flex-wrap: nowrap;
2037    }
2038    .txp-search .txp-dropdown input {
2039      vertical-align: -0.23076923076923em;
2040    }
2041    .txp-search .txp-dropdown label {
2042      display: inline-block;
2043      width: 85%;
2044      padding: 0.23076923076923em 0.30769230769231em;
2045      cursor: pointer;
2046      vertical-align: text-top;
2047    }
2048    .txp-search-clear {
2049      -ms-flex: 1;
2050          flex: 1;
2051      margin: auto 0.5em;
2052      text-align: right;
2053    }
2054    [dir="rtl"] .txp-search-clear {
2055      text-align: left;
2056    }
2057    /**
2058   * Actions and upload forms at top of listings.
2059   *
2060   * Appears on:
2061   *
2062   * List panels.
2063   *
2064   * Example HTML:
2065   *
2066   * <div class="txp-control-panel">
2067   *     Content
2068   * </div>
2069   */
2070    .txp-control-panel {
2071      margin-bottom: 1em;
2072      float: left;
2073    }
2074    .txp-control-panel > * {
2075      margin: 0 1em 0 0;
2076    }
2077    .txp-control-panel > *:last-child {
2078      margin-right: 0;
2079    }
2080    .txp-control-panel form {
2081      display: inline-block;
2082    }
2083    .txp-control-panel textarea {
2084      margin-bottom: 1em;
2085    }
2086    /**
2087   * Swap float/margin positions in RTL languages.
2088   */
2089    [dir="rtl"] .txp-control-panel {
2090      float: right;
2091    }
2092    [dir="rtl"] .txp-control-panel > * {
2093      margin: 0 0 0 1em;
2094    }
2095    /**
2096   * List display options at top of listings.
2097   *
2098   * Appears on:
2099   *
2100   * List panels.
2101   *
2102   * Example HTML:
2103   *
2104   * <div class="txp-list-options">
2105   *     <a>List view</a>
2106   *     <a>Grid view</a>
2107   *     <a>List options</a>
2108   * </div>
2109   */
2110    .txp-list-options {
2111      margin: 0.46153846153846em 0 1em;
2112      float: right;
2113    }
2114    .txp-list-options > * {
2115      margin: 0 0 0 1em;
2116    }
2117    .txp-list-options form {
2118      display: inline-block;
2119    }
2120    /**
2121   * Swap float/margin positions in RTL languages.
2122   */
2123    [dir="rtl"] .txp-list-options {
2124      float: left;
2125    }
2126    [dir="rtl"] .txp-list-options > * {
2127      margin: 0 1em 0 0;
2128    }
2129    /**
2130   * Additonal action links ('Duplicate', 'View', etc.) on some panels.
2131   *
2132   * Appears on:
2133   *
2134   * Article write/edit panel, pages panel, forms panel, styles panel.
2135   *
2136   * Example HTML:
2137   *
2138   * <p class="txp-actions">
2139   *     <a class="txp-article-view">View</a>
2140   *     <a class="txp-clone">Duplicate</a>
2141   *     <a class="txp-new">Create new</a>
2142   * </p>
2143   */
2144    .txp-actions a {
2145      display: inline-block;
2146      margin: 0.5em 1em 0 0;
2147    }
2148    .txp-actions a:last-child {
2149      margin: 0.5em 0 0;
2150    }
2151    /**
2152   * Swap margin positions in RTL languages.
2153   */
2154    [dir="rtl"] .txp-actions a {
2155      margin: 0.5em 0 0 1em;
2156    }
2157    [dir="rtl"] .txp-actions a:last-child {
2158      margin: 0.5em 0 0;
2159    }
2160    /**
2161   * Remove top margin when inside a dialog box.
2162   */
2163    .ui-dialog .txp-actions {
2164      margin-top: 0;
2165    }
2166    /**
2167   * Inline the action links.
2168   *
2169   * Appears on:
2170   *
2171   * Article pages panel, forms panel, styles panel.
2172   */
2173    .txp-actions-inline {
2174      margin-top: 1.30769230769231em;
2175      float: right;
2176    }
2177    /**
2178   * Swap position in RTL languages.
2179   */
2180    [dir="rtl"] .txp-actions-inline {
2181      float: left;
2182    }
2183    /**
2184   * AJAX spinners.
2185   *
2186   * Example HTML:
2187   *
2188   * <span class="spinner"></span>
2189   */
2190    span.spinner {
2191      background-image: url("../img/spinner.gif");
2192      background-size: 13px 13px;
2193      display: inline-block;
2194      width: 13px;
2195      height: 13px;
2196    }
2197  }
2198  
2199  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
2200    span.spinner {
2201      background-image: url("../img/spinner@2x.gif");
2202    }
2203  }
2204  
2205  @media screen {
2206    /**
2207   * Parent container for multi-edit `select` widget at bottom of listings.
2208   *
2209   * Appears on:
2210   *
2211   * List panels.
2212   *
2213   * Example HTML:
2214   *
2215   * <div class="multi-edit">
2216   *     <select>
2217   *         <option selected="selected">With selected...</option>
2218   *         <option>Change author</option>
2219   *         <option>Duplicate</option>
2220   *         <option>Delete</option>
2221   *     </select>
2222   * </div>
2223   */
2224    .multi-edit {
2225      margin: 1em 0 0;
2226    }
2227    /**
2228   * Hide secondary `select` element on multi-edit `select` widget.
2229   *
2230   * Display is controlled via JavaScript (hidden by default until an action is
2231   * selected by user, then overrode by `.multi-step`).
2232   *
2233   * Appears on:
2234   *
2235   * List panels.
2236   *
2237   * Example HTML:
2238   *
2239   * <div class="multi-edit">
2240   *     <select>
2241   *         <option selected="selected">With selected...</option>
2242   *         <option>Change author</option>
2243   *         <option>Duplicate</option>
2244   *         <option>Delete</option>
2245   *     </select>
2246   *     <div class="multi-option">
2247   *         <select name="order">
2248   *             <option value="1">1</option>
2249   *             <option value="2">1</option>
2250   *             <option value="3" selected="selected">5</option>
2251   *         </select>
2252   *     </div>
2253   *     <input type="submit" value="Go">
2254   * </div>
2255   */
2256    .multi-option {
2257      display: none;
2258    }
2259    /**
2260   * Show secondary `select` element on multi-edit `select` widget.
2261   *
2262   * Display is controlled via JavaScript (class not present until an action is
2263   * selected by user, then overrides `.multi-edit`).
2264   *
2265   * Appears on:
2266   *
2267   * List panels.
2268   *
2269   * Example HTML:
2270   *
2271   * <div class="multi-edit">
2272   *     <select>
2273   *         <option selected="selected">With selected...</option>
2274   *         <option>Change author</option>
2275   *         <option>Duplicate</option>
2276   *         <option>Delete</option>
2277   *     </select>
2278   *     <div class="multi-option multi-step">
2279   *         <select name="order">
2280   *             <option value="1">1</option>
2281   *             <option value="2">1</option>
2282   *             <option value="3" selected="selected">5</option>
2283   *         </select>
2284   *     </div>
2285   *     <input type="submit" value="Go">
2286   * </div>
2287   */
2288    .multi-option.multi-step {
2289      display: inline-block;
2290      margin-left: 0.30769230769231em;
2291    }
2292    /**
2293   * Ensure links display as inline blocks (prevents linebreak problems).
2294   *
2295   * Example HTML:
2296   *
2297   * <a class="txp-option-link">Edit</a>
2298   */
2299    .txp-option-link {
2300      display: inline-block;
2301      white-space: nowrap;
2302    }
2303    /**
2304   * When text sections are linked with anchors, make sure there is ample padding
2305   * above so they don't become obscured by sticky `header` area.
2306   *
2307   * Appears on:
2308   *
2309   * Plugin help pages, miscellaneous text pages.
2310   *
2311   * Example HTML:
2312   *
2313   * <section class="text-section" id="help-section02">
2314   */
2315    .text-section {
2316      margin-top: 3em;
2317      padding-top: 3em;
2318      border-top: 2px solid #cccccc;
2319    }
2320    /**
2321   * System permissions 'keep out' messages.
2322   */
2323    .restricted-area {
2324      font-size: 2em;
2325      text-align: center;
2326    }
2327    /**
2328   * Visually disabled text and anchors.
2329   */
2330    .disabled {
2331      background-image: none;
2332      cursor: default !important;
2333      opacity: 0.33;
2334    }
2335    .disabled a {
2336      text-decoration: none;
2337      cursor: default;
2338    }
2339    /**
2340   * List navigators on list panels.
2341   *
2342   * Anchor elements kept to one line to prevent space between buttons.
2343   *
2344   * Example HTML:
2345   *
2346   * <div class="txp-navigation" id="image_navigation">
2347   *     <p class="nav-tertiary pageby">
2348   *         <a class="navlink-active">15</a><a class="navlink">25</a><a class="navlink">50</a>
2349   *     </p>
2350   *     <nav class="prev-next">
2351   *         <span class="disabled"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span>
2352   *         <form>
2353   *             <label>Page</label>
2354   *             <input class="current-page">
2355   *             of <span class="total-pages">2</span>
2356   *         </form>
2357   *         <a><span class="ui-icon ui-icon-arrowthick-1-e">Next</span></a>
2358   *     </nav>
2359   * </div>
2360   */
2361    .txp-navigation::after {
2362      display: table;
2363      clear: both;
2364      content: "";
2365    }
2366    .pageby {
2367      margin: 1em 0;
2368      float: left;
2369    }
2370    .prev-next {
2371      margin: 1em 0;
2372      float: right;
2373    }
2374    .prev-next form {
2375      display: inline-block;
2376    }
2377    /**
2378   * Swap margin positions and arrow icons in RTL languages.
2379   */
2380    [dir="rtl"] .pageby {
2381      float: right;
2382    }
2383    [dir="rtl"] .prev-next {
2384      float: left;
2385    }
2386    [dir="rtl"] .prev-next .ui-icon-arrowthick-1-w {
2387      background-position: -32px -48px;
2388    }
2389    [dir="rtl"] .prev-next .ui-icon-arrowthick-1-e {
2390      background-position: -96px -48px;
2391    }
2392    /* Panes
2393     ========================================================================== */
2394    /**
2395   * Styling of edit panels.
2396   *
2397   * 1. Maximum width of edit panels.
2398   * 2. Remove margin above `h2` within panels.
2399   */
2400    .txp-edit {
2401      max-width: 60em;
2402      margin: 0 auto 1em;
2403      padding: 1em 1em 1px;
2404      border: 1px solid #d4d4d4;
2405      /* 1 */
2406      background: #ffffff;
2407    }
2408    .txp-edit h2 {
2409      /* 2 */
2410      margin-top: 0;
2411    }
2412    /**
2413   * Styling of edit panel cancel/submit button combinations.
2414   */
2415    .txp-edit-actions {
2416      margin: 1em -1em;
2417      padding: 1em 1em 0;
2418      border-top: 2px solid #ffffff;
2419      text-align: right;
2420    }
2421    .txp-edit-actions > * {
2422      margin: 0 0 0 1em;
2423    }
2424    /**
2425   * Swap alignment and margin positions in RTL languages.
2426   */
2427    [dir="rtl"] .txp-edit-actions {
2428      text-align: left;
2429    }
2430    [dir="rtl"] .txp-edit-actions > * {
2431      margin: 0 1em 0 0;
2432    }
2433    /* Form fields.
2434     ========================================================================== */
2435    /**
2436   * Form field containers.
2437   *
2438   * Textpattern form fields can have optional inline help texts applied to them.
2439   *
2440   * Example HTML:
2441   *
2442   * <div class="txp-form-field">
2443   *     <div class="txp-form-field-label">
2444   *         <label> <a class="pophelp">i</a></label>
2445   *     </div>
2446   *     <div class="txp-form-field-value">
2447   *         <input>
2448   *     </div>
2449   * </div>
2450   *
2451   * <div class="txp-form-field">
2452   *     <div class="txp-form-field-label">
2453   *         <label> <a class="pophelp">i</a></label>
2454   *     </div>
2455   *     <div class="txp-form-field-instructions">
2456   *         <p>(Optional) intructions on how to fill out this form field.</p>
2457   *     </div>
2458   *     <div class="txp-form-field-value">
2459   *         <input>
2460   *     </div>
2461   * </div>
2462   */
2463    .txp-form-field {
2464      margin: 1em 0;
2465    }
2466    /**
2467   * Label/value form field pairings.
2468   *
2469   * Note: this is always collapsed to a one-column format on mobile layout.
2470   *
2471   * Example HTML:
2472   *
2473   * <div class="txp-form-field">
2474   *     <div class="txp-form-field-label">
2475   *         <label>Label <a class="pophelp">i</a></label>
2476   *     </div>
2477   *     <div class="txp-form-field-value">
2478   *         <input type="text" size="32">
2479   *     </div>
2480   * </div>
2481   */
2482    .txp-form-field-label,
2483    .txp-form-field-value {
2484      max-width: 30em;
2485    }
2486    /**
2487   * Inline form field pairings on edit panels, preferences group panels and
2488   * setup panels.
2489   *
2490   * Example HTML:
2491   *
2492   * <form class="txp-edit">
2493   *     <div class="txp-form-field">
2494   *         <div class="txp-form-field-label"></div>
2495   *         <div class="txp-form-field-value"></div>
2496   *     </div>
2497   * </form>
2498   */
2499    .txp-edit .txp-form-field:not(.txp-form-field-textarea),
2500    .txp-prefs-group .txp-form-field:not(.txp-form-field-textarea),
2501    .setup:not(.welcome) .txp-form-field:not(.txp-form-field-textarea) {
2502      display: -ms-flexbox;
2503      display: flex;
2504      -ms-flex-align: baseline;
2505          align-items: baseline;
2506    }
2507    .txp-edit .txp-form-field-label,
2508    .txp-edit .txp-form-field-value,
2509    .txp-prefs-group .txp-form-field-label,
2510    .txp-prefs-group .txp-form-field-value,
2511    .setup:not(.welcome) .txp-form-field-label,
2512    .setup:not(.welcome) .txp-form-field-value {
2513      -ms-flex: 1 1 0%;
2514          flex: 1 1 0%;
2515      min-height: 2.16666666666667em;
2516    }
2517    /**
2518   * Don't inline or constrain form fields for textareas.
2519   *
2520   * Example HTML:
2521   *
2522   * <div class="txp-form-field txp-form-field-textarea">
2523   *     <div class="txp-form-field-label">
2524   *         <label>Label <a class="pophelp">i</a></label>
2525   *     </div>
2526   *     <div class="txp-form-field-value">
2527   *         <textarea></textarea>
2528   *     </div>
2529   * </div>
2530   */
2531    .txp-form-field-textarea .txp-form-field-label,
2532    .txp-form-field-textarea .txp-form-field-value {
2533      -ms-flex: none;
2534          flex: none;
2535      max-width: inherit;
2536      min-height: inherit;
2537    }
2538    /**
2539   * Don't constrain form fields when in 3 column layout spans.
2540   */
2541    .txp-layout-4col-3span .txp-form-field-label,
2542    .txp-layout-4col-3span .txp-form-field-value {
2543      max-width: inherit;
2544    }
2545    /**
2546   * Form field inline help texts.
2547   *
2548   * 1. Limit maximum width of instructions, for legibility.
2549   *
2550   * Example HTML:
2551   *
2552   * <div class="txp-form-field>
2553   *     <div class="txp-form-field-label"></div>
2554   *     <div class="txp-form-field-instructions">
2555   *         <p>(Optional) intructions on how to fill out this form field.</p>
2556   *     </div>
2557   *     <div class="txp-form-field-value"></div>
2558   * </div>
2559   */
2560    .txp-form-field-instructions {
2561      /* 1 */
2562      max-width: 60em;
2563    }
2564    /**
2565   * Tag builder link on Forms panel and Pages panel.
2566   */
2567    .txp-tagbuilder-dialog {
2568      position: relative;
2569      margin: 0 1px;
2570      float: right;
2571      z-index: 2;
2572    }
2573    /**
2574   * Swap alignment of tag builder link in RTL languages.
2575   */
2576    [dir="rtl"] .txp-tagbuilder-dialog {
2577      float: left;
2578    }
2579    /**
2580   * Ensure Tag builder vertical footprint doesn't spill out of screen area.
2581   */
2582    .txp-tagbuilder-container {
2583      display: -ms-flexbox;
2584      display: flex;
2585      -ms-flex-flow: column;
2586          flex-flow: column;
2587      max-height: 90vh;
2588      overflow: hidden;
2589    }
2590    .txp-tagbuilder-container .ui-dialog-titlebar {
2591      -ms-flex: none;
2592          flex: none;
2593    }
2594    .txp-tagbuilder-content {
2595      -ms-flex: 1 1 auto;
2596          flex: 1 1 auto;
2597      overflow: scroll;
2598    }
2599    /* Setup and login panels - additional layout
2600     ========================================================================== */
2601    /**
2602   * Column width and margins of setup panels.
2603   */
2604    .txp-setup {
2605      max-width: 44em;
2606      margin: 1em auto;
2607    }
2608    .welcome .txp-setup {
2609      max-width: 26em;
2610    }
2611    /**
2612   * Column width and margins of login panels.
2613   */
2614    .txp-login {
2615      max-width: 26em;
2616      margin: 1em auto;
2617    }
2618    /**
2619   * Welcome page `select` spans entire column width.
2620   */
2621    .welcome select {
2622      width: 100%;
2623    }
2624    /* Content -> Categories panel - additional layout
2625     ========================================================================== */
2626    /**
2627   * Extra margin below multi-edit widgets on categories page.
2628   */
2629    #page-category .multi-edit {
2630      margin-bottom: 1em;
2631    }
2632    /* Content -> Write panel - additional layout
2633     ========================================================================== */
2634    /**
2635   * View mode tabs on write area.
2636   *
2637   * Example HTML:
2638   *
2639   * <div id="view_modes">
2640   *     <ul>
2641   *         <li id="tab-text" class="active"><a>Text</a></li>
2642   *         <li id="tab-html"><a>HTML</a></li>
2643   *         <li id="tab-preview"><a>Preview</a></li>
2644   *     </ul>
2645   * </div>
2646   */
2647    #view_modes ul {
2648      margin: 0;
2649      padding: 0;
2650      border-bottom: 1px solid #cccccc;
2651      font-size: 10px;
2652      line-height: 15px;
2653    }
2654    #view_modes ul li {
2655      display: inline-block;
2656    }
2657    #view_modes ul a {
2658      display: block;
2659      position: relative;
2660      bottom: -1px;
2661      padding: 0.25em 1em;
2662      border: 1px solid #dbdbdb;
2663      border-top-left-radius: 0.75em 2em;
2664      border-top-right-radius: 0.75em 2em;
2665      border-bottom-color: #cccccc;
2666      background-color: #fff8dd;
2667      color: #333333;
2668      text-decoration: none;
2669      box-shadow: inset 0 -0.2em 0.4em rgba(219, 203, 141, 0.5), 0 -0.1em 0.1em rgba(0, 0, 0, 0.1);
2670    }
2671    #view_modes ul a:hover {
2672      border-color: #aaaaaa;
2673      background-color: #fffdf7;
2674    }
2675    #view_modes ul a:focus {
2676      border-color: #5b9dd9;
2677      outline: none;
2678    }
2679    #view_modes ul .active a {
2680      border-bottom-color: #ffffff;
2681      background-color: white;
2682      box-shadow: 0 -0.15em 0.15em rgba(0, 0, 0, 0.1);
2683    }
2684    #view_modes ul .active a:focus {
2685      border-color: #5b9dd9;
2686    }
2687    /**
2688   * Write page excerpt field when in HTML preview.
2689   */
2690    .html .excerpt {
2691      margin-bottom: 1em;
2692    }
2693    /**
2694   * Custom font size/weight/colour for elements in write -> main content area.
2695   */
2696    #main_content .text input {
2697      font-size: 16px;
2698    }
2699    #main_content .text textarea {
2700      font-size: 16px;
2701      line-height: 1.5em;
2702    }
2703    #main_content .text .title input {
2704      font-weight: bold;
2705    }
2706    #main_content .author {
2707      color: #777777;
2708    }
2709    /* Content -> Articles panel - additional layout
2710     ========================================================================== */
2711    /**
2712   * Grey-out text for unpublished articles/non-modified dates in the list.
2713   */
2714    .unpublished,
2715    .not-modified {
2716      color: #777777;
2717    }
2718    /* Content -> Images panel - additional layout
2719     ========================================================================== */
2720    .has-thumbnail a:focus {
2721      outline: 0;
2722    }
2723    .thumbnail-alter input {
2724      margin: 0 0.3333333em 0 0;
2725    }
2726    .thumbnail-alter input:last-child {
2727      margin: 0;
2728    }
2729    [dir="rtl"] .thumbnail-alter input {
2730      margin: 0 0 0 0.3333333em;
2731    }
2732    [dir="rtl"] .thumbnail-alter input:last-child {
2733      margin: 0;
2734    }
2735    .thumbnail-image form {
2736      display: inline-block;
2737      margin-top: 5px;
2738      vertical-align: top;
2739    }
2740    /* Content -> Files panel - additional layout
2741     ========================================================================== */
2742    /**
2743   * Make sure form for selecting existing files is on a new line.
2744   */
2745    .txp-control-panel .assign-existing-form {
2746      display: block;
2747      margin-top: 1em;
2748    }
2749    /* Content -> Comments panel - additional layout
2750     ========================================================================== */
2751    /**
2752   * Red background highlight for spam comment rows in the list.
2753   */
2754    #page-discuss .txp-list tr.spam {
2755      background: #f5e5e5;
2756    }
2757    /**
2758   * Yellow background highlight for unmoderated comment rows in the list.
2759   */
2760    #page-discuss .txp-list tr.moderate {
2761      background: #f9f2e3;
2762    }
2763    /* Presentation -> all panels - additional layout
2764     ========================================================================== */
2765    .presentation textarea.code {
2766      height: 64vh;
2767    }
2768    /* Presentation -> Forms panel - additional layout
2769     ========================================================================== */
2770    #page-form .name {
2771      display: inline-block;
2772      margin: 1em 1em 0 0;
2773    }
2774    #page-form .name input {
2775      width: 15em;
2776    }
2777    [dir="rtl"] #page-form .name {
2778      margin: 1em 0 0 1em;
2779    }
2780    #page-form .type {
2781      display: inline-block;
2782      margin: 1em 0 0;
2783    }
2784    #page-form .txp-layout-4col-3span .txp-actions a {
2785      margin-top: 1.5em;
2786    }
2787    /* Admin -> Preferences panel - additional layout
2788     ========================================================================== */
2789    .txp-prefs-group {
2790      max-width: 64em;
2791    }
2792    /* Admin -> Languages panel - additional layout
2793     ========================================================================== */
2794    #page-lang .txp-list .modified {
2795      margin-left: 0.75em;
2796    }
2797    /* Admin -> Plugins panel - additional layout
2798     ========================================================================== */
2799    tr .manage span,
2800    tr .plugin-prefs {
2801      visibility: hidden;
2802    }
2803    tr.active .manage span,
2804    tr.active .plugin-prefs {
2805      visibility: visible;
2806    }
2807    div.code {
2808      height: 24em;
2809      margin-bottom: 1em;
2810      padding: 0.25em;
2811      border: 1px solid #cccccc;
2812      overflow: auto;
2813      box-sizing: border-box;
2814    }
2815    /* Layout helpers
2816     ========================================================================== */
2817    /**
2818   * Hide jQuery UI elements.
2819   */
2820    .ui-helper-hidden {
2821      display: none;
2822    }
2823    /**
2824   * Hide jQuery UI  text but still allow screen reader access.
2825   */
2826    .ui-helper-hidden-accessible {
2827      position: absolute;
2828      width: 1px;
2829      height: 1px;
2830      margin: -1px;
2831      padding: 0;
2832      border: 0;
2833      overflow: hidden;
2834      clip: rect(0 0 0 0);
2835    }
2836    /**
2837   * Normalize various rules to avoid style inheritance.
2838   */
2839    .ui-helper-reset {
2840      margin: 0;
2841      padding: 0;
2842      border: 0;
2843      outline: 0;
2844      font-size: 12px;
2845      line-height: 18px;
2846      list-style: none;
2847      text-decoration: none;
2848    }
2849    /**
2850   * Clearfix jQuery UI elements.
2851   */
2852    .ui-helper-clearfix::after {
2853      display: table;
2854      clear: both;
2855      border-collapse: collapse;
2856      content: "";
2857    }
2858    /**
2859   * Normalize absolute positioning of jQuery UI elements to avoid misplacement.
2860   */
2861    .ui-helper-zfix {
2862      position: absolute;
2863      top: 0;
2864      left: 0;
2865      width: 100%;
2866      height: 100%;
2867      opacity: 0;
2868    }
2869    /**
2870   * Make jQuery UI elements show above other elements.
2871   */
2872    .ui-front {
2873      z-index: 100;
2874    }
2875    /* Component containers
2876     ========================================================================== */
2877    /**
2878   * Normalize font size of nested jQuery UI widgets to avoid style inheritance.
2879   */
2880    .ui-widget .ui-widget {
2881      font-size: 12px;
2882    }
2883    /**
2884   * General style for jQuery widget content.
2885   */
2886    .ui-widget-content {
2887      border: 1px solid #cccccc;
2888      background-color: #ffffff;
2889    }
2890    /**
2891   * General style for jQuery widget headers.
2892   */
2893    .ui-widget-header {
2894      background-color: #e2e2e2;
2895      font-weight: bold;
2896    }
2897    /* Interaction states
2898     ========================================================================== */
2899    /**
2900   * Default jQuery UI widget interaction state.
2901   */
2902    .ui-state-default {
2903      border: 1px solid #cccccc;
2904      background-color: #e2e2e2;
2905      color: #333333;
2906    }
2907    /**
2908   * Override hover/focus states for anchors in certain situations.
2909   */
2910    a.ui-state-default:hover,
2911    a.ui-state-default:focus {
2912      color: #333333;
2913      text-decoration: none;
2914    }
2915    /**
2916   * Hover jQuery UI widget interaction states.
2917   */
2918    .ui-state-hover {
2919      border-color: #aaaaaa;
2920      background-color: #eeeeee;
2921    }
2922    /**
2923   * Focus jQuery UI widget interaction states.
2924   */
2925    .ui-state-focus {
2926      border-color: #5b9dd9;
2927      outline: 0;
2928    }
2929    .ui-state-focus a {
2930      outline: 0;
2931    }
2932    /**
2933   * Active jQuery UI widget interaction state.
2934   */
2935    .ui-state-active {
2936      background-color: #ffffff;
2937    }
2938    /**
2939   * Highlight colour for jQuery UI widgets currently in 'selecting' state.
2940   */
2941    .ui-selecting {
2942      background-color: #c7dbfa;
2943    }
2944    /**
2945   * Highlight colour for jQuery UI widgets currently in 'selected' state.
2946   */
2947    .ui-selected {
2948      background-color: #e3edfc;
2949    }
2950    /* Interaction cues
2951     ========================================================================== */
2952    /**
2953   * jQuery UI highlight cue colouring.
2954   */
2955    .ui-state-highlight {
2956      border: 1px solid #e4c788;
2957      background-color: #f7eedb;
2958    }
2959    /**
2960   * jQuery UI error cue colouring.
2961   */
2962    .ui-state-error {
2963      border: 1px solid #e1b2b2;
2964      background-color: #f2dede;
2965      color: #9d261d;
2966    }
2967    /**
2968   * Visually prioritized jQuery UI text.
2969   */
2970    .ui-priority-primary {
2971      font-weight: bold;
2972    }
2973    /**
2974   * Visually non-prioritized jQuery UI text.
2975   */
2976    .ui-priority-secondary {
2977      font-weight: normal;
2978      opacity: 0.66;
2979    }
2980    /**
2981   * Visually disabled jQuery UI text and anchors.
2982   */
2983    .ui-state-disabled {
2984      background-image: none;
2985      cursor: default !important;
2986      opacity: 0.33;
2987      pointer-events: none;
2988    }
2989    .ui-state-disabled a {
2990      text-decoration: none;
2991      cursor: default;
2992    }
2993    /* Overlays
2994     ========================================================================== */
2995    /**
2996   * Dark, semi-transparent container overlays.
2997   *
2998   * Example HTML:
2999   *
3000   * <div class="ui-widget-overlay"></div>
3001   */
3002    .ui-widget-overlay {
3003      position: fixed;
3004      top: 0;
3005      left: 0;
3006      width: 100%;
3007      height: 100%;
3008      background: rgba(0, 0, 0, 0.75);
3009    }
3010    /* Shadows
3011     ========================================================================== */
3012    /**
3013   * Faux shadows via `background-color`.
3014   *
3015   * Example HTML:
3016   *
3017   * <div class="ui-widget-shadow"></div>
3018   */
3019    .ui-widget-shadow {
3020      box-shadow: 0 0 5px #666666;
3021    }
3022    /* Icons
3023     ========================================================================== */
3024    /**
3025   * jQuery UI icon sprites, various colourschemes depending of usage state.
3026   *
3027   * Also used for 'Destroy' button.
3028   *
3029   * Example HTML:
3030   *
3031   * <span class="ui-icon ui-icon-caret-1-n"></span>
3032   * <span class="ui-icon ui-icon-folder-collapsed"></span>
3033   * <span class="ui-icon ui-icon-play"></span>
3034   *
3035   * TODO: Use `mask` in future (http://caniuse.com/#search=mask), instead of
3036   * `filter` or dedicated image.
3037   */
3038    .ui-icon {
3039      display: inline-block;
3040      position: relative;
3041      width: 16px;
3042      height: 16px;
3043      background-image: url("../img/ui-icon-sprite-333333.svg");
3044      background-repeat: no-repeat;
3045      background-size: 256px 272px;
3046      text-indent: -9999px;
3047      overflow: hidden;
3048      vertical-align: text-bottom;
3049    }
3050    .ui-widget-icon-block {
3051      display: block;
3052      left: 50%;
3053      margin-left: -8px;
3054    }
3055    /**
3056   * Default state icons.
3057   *
3058   * TODO: Use `mask` in future.
3059   */
3060    .ui-state-default .ui-icon {
3061      -webkit-filter: brightness(1.6666667);
3062              filter: brightness(1.6666667);
3063    }
3064    /**
3065   * Weighted content icons and interaction state icons.
3066   *
3067   * TODO: Use `mask` in future.
3068   */
3069    .ui-widget-content .ui-icon,
3070    .ui-widget-header .ui-icon,
3071    .ui-state-hover .ui-icon,
3072    .ui-state-focus .ui-icon,
3073    .ui-state-active .ui-icon {
3074      -webkit-filter: none;
3075              filter: none;
3076    }
3077    /**
3078   * 'Succes' state icons.
3079   *
3080   * Example HTML:
3081   *
3082   * <p class="success">
3083   *     <span class="ui-icon ui-icon-check"></span>
3084   *     Success!
3085   * </p>
3086   *
3087   * TODO: Use `mask` in future.
3088   */
3089    .success .ui-icon {
3090      background-image: url("../img/ui-icon-sprite-success.svg");
3091    }
3092    /**
3093   * 'Warning' state icons.
3094   *
3095   * Example HTML:
3096   *
3097   * <p class="warning">
3098   *     <span class="ui-icon ui-icon-alert"></span>
3099   *     Warning!
3100   * </p>
3101   *
3102   * TODO: Use `mask` in future.
3103   */
3104    .ui-state-highlight .ui-icon,
3105    .warning .ui-icon {
3106      background-image: url("../img/ui-icon-sprite-warning.svg");
3107    }
3108    /**
3109   * 'Error' state icons.
3110   *
3111   * Example HTML:
3112   *
3113   * <p class="error">
3114   *     <span class="ui-icon ui-icon-alert"></span>
3115   *     Error!
3116   * </p>
3117   *
3118   * TODO: Use `mask` in future.
3119   */
3120    .ui-state-error .ui-icon,
3121    .ui-state-error-text .ui-icon,
3122    .error .ui-icon,
3123    .destroy .ui-icon {
3124      background-image: url("../img/ui-icon-sprite-error.svg");
3125    }
3126    /**
3127   * 'Information' state icons.
3128   *
3129   * Example HTML:
3130   *
3131   * <p class="information">
3132   *     <span class="ui-icon ui-icon-info"></span>
3133   *     Content
3134   * </p>
3135   *
3136   * TODO: Use `mask` in future.
3137   */
3138    .information .ui-icon {
3139      background-image: url("../img/ui-icon-sprite-info.svg");
3140    }
3141    /**
3142   * Icons within Textpattern system message panes.
3143   *
3144   * TODO: Use `mask` in future.
3145   */
3146    #messagepane .ui-icon {
3147      background-image: url("../img/ui-icon-sprite-ffffff.svg");
3148    }
3149    /**
3150   * Icon sprite positionings.
3151   *
3152   * TODO: Use `mask` in future.
3153   */
3154    .ui-icon-blank {
3155      background-position: 16px 16px;
3156    }
3157    .ui-icon-caret-1-n {
3158      background-position: 0 0;
3159    }
3160    .ui-icon-caret-1-ne {
3161      background-position: -16px 0;
3162    }
3163    .ui-icon-caret-1-e {
3164      background-position: -32px 0;
3165    }
3166    .ui-icon-caret-1-se {
3167      background-position: -48px 0;
3168    }
3169    .ui-icon-caret-1-s {
3170      background-position: -64px 0;
3171    }
3172    .ui-icon-caret-1-sw {
3173      background-position: -80px 0;
3174    }
3175    .ui-icon-caret-1-w {
3176      background-position: -96px 0;
3177    }
3178    .ui-icon-caret-1-nw {
3179      background-position: -112px 0;
3180    }
3181    .ui-icon-caret-2-n-s {
3182      background-position: -128px 0;
3183    }
3184    .ui-icon-caret-2-e-w {
3185      background-position: -144px 0;
3186    }
3187    .ui-icon-triangle-1-n {
3188      background-position: 0 -16px;
3189    }
3190    .ui-icon-triangle-1-ne {
3191      background-position: -16px -16px;
3192    }
3193    .ui-icon-triangle-1-e {
3194      background-position: -32px -16px;
3195    }
3196    .ui-icon-triangle-1-se {
3197      background-position: -48px -16px;
3198    }
3199    .ui-icon-triangle-1-s {
3200      background-position: -64px -16px;
3201    }
3202    .ui-icon-triangle-1-sw {
3203      background-position: -80px -16px;
3204    }
3205    .ui-icon-triangle-1-w {
3206      background-position: -96px -16px;
3207    }
3208    .ui-icon-triangle-1-nw {
3209      background-position: -112px -16px;
3210    }
3211    .ui-icon-triangle-2-n-s {
3212      background-position: -128px -16px;
3213    }
3214    .ui-icon-triangle-2-e-w {
3215      background-position: -144px -16px;
3216    }
3217    .ui-icon-arrow-1-n {
3218      background-position: 0 -32px;
3219    }
3220    .ui-icon-arrow-1-ne {
3221      background-position: -16px -32px;
3222    }
3223    .ui-icon-arrow-1-e {
3224      background-position: -32px -32px;
3225    }
3226    .ui-icon-arrow-1-se {
3227      background-position: -48px -32px;
3228    }
3229    .ui-icon-arrow-1-s {
3230      background-position: -64px -32px;
3231    }
3232    .ui-icon-arrow-1-sw {
3233      background-position: -80px -32px;
3234    }
3235    .ui-icon-arrow-1-w {
3236      background-position: -96px -32px;
3237    }
3238    .ui-icon-arrow-1-nw {
3239      background-position: -112px -32px;
3240    }
3241    .ui-icon-arrow-2-n-s {
3242      background-position: -128px -32px;
3243    }
3244    .ui-icon-arrow-2-ne-sw {
3245      background-position: -144px -32px;
3246    }
3247    .ui-icon-arrow-2-e-w {
3248      background-position: -160px -32px;
3249    }
3250    .ui-icon-arrow-2-se-nw {
3251      background-position: -176px -32px;
3252    }
3253    .ui-icon-arrowstop-1-n {
3254      background-position: -192px -32px;
3255    }
3256    .ui-icon-arrowstop-1-e {
3257      background-position: -208px -32px;
3258    }
3259    .ui-icon-arrowstop-1-s {
3260      background-position: -224px -32px;
3261    }
3262    .ui-icon-arrowstop-1-w {
3263      background-position: -240px -32px;
3264    }
3265    .ui-icon-arrowthick-1-n {
3266      background-position: 0 -48px;
3267    }
3268    .ui-icon-arrowthick-1-ne {
3269      background-position: -16px -48px;
3270    }
3271    .ui-icon-arrowthick-1-e {
3272      background-position: -32px -48px;
3273    }
3274    .ui-icon-arrowthick-1-se {
3275      background-position: -48px -48px;
3276    }
3277    .ui-icon-arrowthick-1-s {
3278      background-position: -64px -48px;
3279    }
3280    .ui-icon-arrowthick-1-sw {
3281      background-position: -80px -48px;
3282    }
3283    .ui-icon-arrowthick-1-w {
3284      background-position: -96px -48px;
3285    }
3286    .ui-icon-arrowthick-1-nw {
3287      background-position: -112px -48px;
3288    }
3289    .ui-icon-arrowthick-2-n-s {
3290      background-position: -128px -48px;
3291    }
3292    .ui-icon-arrowthick-2-ne-sw {
3293      background-position: -144px -48px;
3294    }
3295    .ui-icon-arrowthick-2-e-w {
3296      background-position: -160px -48px;
3297    }
3298    .ui-icon-arrowthick-2-se-nw {
3299      background-position: -176px -48px;
3300    }
3301    .ui-icon-arrowthickstop-1-n {
3302      background-position: -192px -48px;
3303    }
3304    .ui-icon-arrowthickstop-1-e {
3305      background-position: -208px -48px;
3306    }
3307    .ui-icon-arrowthickstop-1-s {
3308      background-position: -224px -48px;
3309    }
3310    .ui-icon-arrowthickstop-1-w {
3311      background-position: -240px -48px;
3312    }
3313    .ui-icon-arrowreturnthick-1-w {
3314      background-position: 0 -64px;
3315    }
3316    .ui-icon-arrowreturnthick-1-n {
3317      background-position: -16px -64px;
3318    }
3319    .ui-icon-arrowreturnthick-1-e {
3320      background-position: -32px -64px;
3321    }
3322    .ui-icon-arrowreturnthick-1-s {
3323      background-position: -48px -64px;
3324    }
3325    .ui-icon-arrowreturn-1-w {
3326      background-position: -64px -64px;
3327    }
3328    .ui-icon-arrowreturn-1-n {
3329      background-position: -80px -64px;
3330    }
3331    .ui-icon-arrowreturn-1-e {
3332      background-position: -96px -64px;
3333    }
3334    .ui-icon-arrowreturn-1-s {
3335      background-position: -112px -64px;
3336    }
3337    .ui-icon-arrowrefresh-1-w {
3338      background-position: -128px -64px;
3339    }
3340    .ui-icon-arrowrefresh-1-n {
3341      background-position: -144px -64px;
3342    }
3343    .ui-icon-arrowrefresh-1-e {
3344      background-position: -160px -64px;
3345    }
3346    .ui-icon-arrowrefresh-1-s {
3347      background-position: -176px -64px;
3348    }
3349    .ui-icon-arrow-4 {
3350      background-position: 0 -80px;
3351    }
3352    .ui-icon-arrow-4-diag {
3353      background-position: -16px -80px;
3354    }
3355    .ui-icon-extlink {
3356      background-position: -32px -80px;
3357    }
3358    .ui-icon-newwin {
3359      background-position: -48px -80px;
3360    }
3361    .ui-icon-refresh {
3362      background-position: -64px -80px;
3363    }
3364    .ui-icon-shuffle {
3365      background-position: -80px -80px;
3366    }
3367    .ui-icon-transfer-e-w {
3368      background-position: -96px -80px;
3369    }
3370    .ui-icon-transferthick-e-w {
3371      background-position: -112px -80px;
3372    }
3373    .ui-icon-folder-collapsed {
3374      background-position: 0 -96px;
3375    }
3376    .ui-icon-folder-open {
3377      background-position: -16px -96px;
3378    }
3379    .ui-icon-document {
3380      background-position: -32px -96px;
3381    }
3382    .ui-icon-document-b {
3383      background-position: -48px -96px;
3384    }
3385    .ui-icon-note {
3386      background-position: -64px -96px;
3387    }
3388    .ui-icon-mail-closed {
3389      background-position: -80px -96px;
3390    }
3391    .ui-icon-mail-open {
3392      background-position: -96px -96px;
3393    }
3394    .ui-icon-suitcase {
3395      background-position: -112px -96px;
3396    }
3397    .ui-icon-comment {
3398      background-position: -128px -96px;
3399    }
3400    .ui-icon-person {
3401      background-position: -144px -96px;
3402    }
3403    .ui-icon-print {
3404      background-position: -160px -96px;
3405    }
3406    .ui-icon-trash {
3407      background-position: -176px -96px;
3408    }
3409    .ui-icon-locked {
3410      background-position: -192px -96px;
3411    }
3412    .ui-icon-unlocked {
3413      background-position: -208px -96px;
3414    }
3415    .ui-icon-bookmark {
3416      background-position: -224px -96px;
3417    }
3418    .ui-icon-tag {
3419      background-position: -240px -96px;
3420    }
3421    .ui-icon-home {
3422      background-position: 0 -112px;
3423    }
3424    .ui-icon-flag {
3425      background-position: -16px -112px;
3426    }
3427    .ui-icon-calendar {
3428      background-position: -32px -112px;
3429    }
3430    .ui-icon-cart {
3431      background-position: -48px -112px;
3432    }
3433    .ui-icon-pencil {
3434      background-position: -64px -112px;
3435    }
3436    .ui-icon-clock {
3437      background-position: -80px -112px;
3438    }
3439    .ui-icon-disk {
3440      background-position: -96px -112px;
3441    }
3442    .ui-icon-calculator {
3443      background-position: -112px -112px;
3444    }
3445    .ui-icon-zoomin {
3446      background-position: -128px -112px;
3447    }
3448    .ui-icon-zoomout {
3449      background-position: -144px -112px;
3450    }
3451    .ui-icon-search {
3452      background-position: -160px -112px;
3453    }
3454    .ui-icon-wrench {
3455      background-position: -176px -112px;
3456    }
3457    .ui-icon-gear {
3458      background-position: -192px -112px;
3459    }
3460    .ui-icon-heart {
3461      background-position: -208px -112px;
3462    }
3463    .ui-icon-star {
3464      background-position: -224px -112px;
3465    }
3466    .ui-icon-link {
3467      background-position: -240px -112px;
3468    }
3469    .ui-icon-cancel {
3470      background-position: 0 -128px;
3471    }
3472    .ui-icon-plus {
3473      background-position: -16px -128px;
3474    }
3475    .ui-icon-plusthick {
3476      background-position: -32px -128px;
3477    }
3478    .ui-icon-minus {
3479      background-position: -48px -128px;
3480    }
3481    .ui-icon-minusthick {
3482      background-position: -64px -128px;
3483    }
3484    .ui-icon-close {
3485      background-position: -80px -128px;
3486    }
3487    .ui-icon-closethick {
3488      background-position: -96px -128px;
3489    }
3490    .ui-icon-key {
3491      background-position: -112px -128px;
3492    }
3493    .ui-icon-lightbulb {
3494      background-position: -128px -128px;
3495    }
3496    .ui-icon-scissors {
3497      background-position: -144px -128px;
3498    }
3499    .ui-icon-clipboard {
3500      background-position: -160px -128px;
3501    }
3502    .ui-icon-copy {
3503      background-position: -176px -128px;
3504    }
3505    .ui-icon-contact {
3506      background-position: -192px -128px;
3507    }
3508    .ui-icon-image {
3509      background-position: -208px -128px;
3510    }
3511    .ui-icon-video {
3512      background-position: -224px -128px;
3513    }
3514    .ui-icon-script {
3515      background-position: -240px -128px;
3516    }
3517    .ui-icon-alert {
3518      background-position: 0 -144px;
3519    }
3520    .ui-icon-info {
3521      background-position: -16px -144px;
3522    }
3523    .ui-icon-notice {
3524      background-position: -32px -144px;
3525    }
3526    .ui-icon-help {
3527      background-position: -48px -144px;
3528    }
3529    .ui-icon-check {
3530      background-position: -64px -144px;
3531    }
3532    .ui-icon-bullet {
3533      background-position: -80px -144px;
3534    }
3535    .ui-icon-radio-on {
3536      background-position: -96px -144px;
3537    }
3538    .ui-icon-radio-off {
3539      background-position: -112px -144px;
3540    }
3541    .ui-icon-pin-w {
3542      background-position: -128px -144px;
3543    }
3544    .ui-icon-pin-s {
3545      background-position: -144px -144px;
3546    }
3547    .ui-icon-play {
3548      background-position: 0 -160px;
3549    }
3550    .ui-icon-pause {
3551      background-position: -16px -160px;
3552    }
3553    .ui-icon-seek-next {
3554      background-position: -32px -160px;
3555    }
3556    .ui-icon-seek-prev {
3557      background-position: -48px -160px;
3558    }
3559    .ui-icon-seek-end {
3560      background-position: -64px -160px;
3561    }
3562    .ui-icon-seek-start {
3563      background-position: -80px -160px;
3564    }
3565    .ui-icon-stop {
3566      background-position: -96px -160px;
3567    }
3568    .ui-icon-eject {
3569      background-position: -112px -160px;
3570    }
3571    .ui-icon-volume-off {
3572      background-position: -128px -160px;
3573    }
3574    .ui-icon-volume-on {
3575      background-position: -144px -160px;
3576    }
3577    .ui-icon-power {
3578      background-position: 0 -176px;
3579    }
3580    .ui-icon-signal-diag {
3581      background-position: -16px -176px;
3582    }
3583    .ui-icon-signal {
3584      background-position: -32px -176px;
3585    }
3586    .ui-icon-battery-0 {
3587      background-position: -48px -176px;
3588    }
3589    .ui-icon-battery-1 {
3590      background-position: -64px -176px;
3591    }
3592    .ui-icon-battery-2 {
3593      background-position: -80px -176px;
3594    }
3595    .ui-icon-battery-3 {
3596      background-position: -96px -176px;
3597    }
3598    .ui-icon-circle-plus {
3599      background-position: 0 -192px;
3600    }
3601    .ui-icon-circle-minus {
3602      background-position: -16px -192px;
3603    }
3604    .ui-icon-circle-close {
3605      background-position: -32px -192px;
3606    }
3607    .ui-icon-circle-triangle-e {
3608      background-position: -48px -192px;
3609    }
3610    .ui-icon-circle-triangle-s {
3611      background-position: -64px -192px;
3612    }
3613    .ui-icon-circle-triangle-w {
3614      background-position: -80px -192px;
3615    }
3616    .ui-icon-circle-triangle-n {
3617      background-position: -96px -192px;
3618    }
3619    .ui-icon-circle-arrow-e {
3620      background-position: -112px -192px;
3621    }
3622    .ui-icon-circle-arrow-s {
3623      background-position: -128px -192px;
3624    }
3625    .ui-icon-circle-arrow-w {
3626      background-position: -144px -192px;
3627    }
3628    .ui-icon-circle-arrow-n {
3629      background-position: -160px -192px;
3630    }
3631    .ui-icon-circle-zoomin {
3632      background-position: -176px -192px;
3633    }
3634    .ui-icon-circle-zoomout {
3635      background-position: -192px -192px;
3636    }
3637    .ui-icon-circle-check {
3638      background-position: -208px -192px;
3639    }
3640    .ui-icon-circlesmall-plus {
3641      background-position: 0 -208px;
3642    }
3643    .ui-icon-circlesmall-minus {
3644      background-position: -16px -208px;
3645    }
3646    .ui-icon-circlesmall-close {
3647      background-position: -32px -208px;
3648    }
3649    .ui-icon-squaresmall-plus {
3650      background-position: -48px -208px;
3651    }
3652    .ui-icon-squaresmall-minus {
3653      background-position: -64px -208px;
3654    }
3655    .ui-icon-squaresmall-close {
3656      background-position: -80px -208px;
3657    }
3658    .ui-icon-grip-dotted-vertical {
3659      background-position: 0 -224px;
3660    }
3661    .ui-icon-grip-dotted-horizontal {
3662      background-position: -16px -224px;
3663    }
3664    .ui-icon-grip-solid-vertical {
3665      background-position: -32px -224px;
3666    }
3667    .ui-icon-grip-solid-horizontal {
3668      background-position: -48px -224px;
3669    }
3670    .ui-icon-gripsmall-diagonal-se {
3671      background-position: -64px -224px;
3672    }
3673    .ui-icon-grip-diagonal-se {
3674      background-position: -80px -224px;
3675    }
3676    /* Hive extra icons
3677     ========================================================================== */
3678    /**
3679   * Additional handy icons we've added to the standard jQuery UI icon sprite.
3680   *
3681   * Example HTML:
3682   *
3683   * <span class="ui-icon ui-extra-icon-code"></span>
3684   * <span class="ui-icon ui-extra-icon-download"></span>
3685   *
3686   * TODO: Use `mask` in future.
3687   */
3688    .ui-extra-icon-code {
3689      background-position: 0 -256px;
3690    }
3691    .ui-extra-icon-list {
3692      background-position: -16px -256px;
3693    }
3694    .ui-extra-icon-grid {
3695      background-position: -32px -256px;
3696    }
3697    .ui-extra-icon-download {
3698      background-position: -48px -256px;
3699    }
3700    .ui-extra-icon-upload {
3701      background-position: -64px -256px;
3702    }
3703    .ui-extra-icon-attach {
3704      background-position: -80px -256px;
3705    }
3706    .ui-extra-icon-new-document {
3707      background-position: -96px -256px;
3708    }
3709    .ui-extra-icon-facebook {
3710      background-position: -112px -256px;
3711    }
3712    .ui-extra-icon-googleplus {
3713      background-position: -128px -256px;
3714    }
3715    .ui-extra-icon-linkedin {
3716      background-position: -144px -256px;
3717    }
3718    .ui-extra-icon-twitter {
3719      background-position: -160px -256px;
3720    }
3721    .ui-extra-icon-github {
3722      background-position: -176px -256px;
3723    }
3724    /* Draggable
3725   ========================================================================== */
3726    /**
3727   * jQuery UI Draggable.
3728   *
3729   * Some classes and HTML elements generally added via JavaScript, more info -
3730   * https://jqueryui.com/draggable/
3731   *
3732   * Example HTML:
3733   *
3734   * <div class="ui-draggable">
3735   *     Content
3736   * </div>
3737   */
3738    .ui-draggable {
3739      transition: box-shadow 0.1s linear;
3740    }
3741    .ui-draggable-handle {
3742      -ms-touch-action: none;
3743          touch-action: none;
3744    }
3745    /**
3746   * Class added when element is actively being dragged.
3747   */
3748    .ui-draggable-dragging {
3749      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
3750      z-index: 1000;
3751    }
3752    /* Resizable
3753     ========================================================================== */
3754    /**
3755   * jQuery UI Selectable.
3756   *
3757   * Some classes and HTML elements generally added via JavaScript, more info -
3758   * https://jqueryui.com/resizable/
3759   *
3760   * Example HTML:
3761   *
3762   * <div class="ui-resizable">
3763   *     <strong>Resize me!</strong>
3764   *     <div class="ui-resizable-handle ui-resizable-e"></div>
3765   *     <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
3766   * </div>
3767   */
3768    .ui-resizable {
3769      position: relative;
3770    }
3771    .ui-resizable-handle {
3772      display: block;
3773      position: absolute;
3774      font-size: 0.1px;
3775      -ms-touch-action: none;
3776          touch-action: none;
3777    }
3778    /**
3779   * Disabled or auto-hidden resizables.
3780   */
3781    .ui-resizable-disabled .ui-resizable-handle,
3782    .ui-resizable-autohide .ui-resizable-handle {
3783      display: none;
3784    }
3785    /**
3786   * Resize handle positioning options.
3787   */
3788    .ui-resizable-n {
3789      top: -5px;
3790      left: 0;
3791      width: 100%;
3792      height: 7px;
3793      cursor: n-resize;
3794    }
3795    .ui-resizable-s {
3796      bottom: -5px;
3797      left: 0;
3798      width: 100%;
3799      height: 7px;
3800      cursor: s-resize;
3801    }
3802    .ui-resizable-e {
3803      top: 0;
3804      right: -5px;
3805      width: 7px;
3806      height: 100%;
3807      cursor: e-resize;
3808    }
3809    .ui-resizable-w {
3810      top: 0;
3811      left: -5px;
3812      width: 7px;
3813      height: 100%;
3814      cursor: w-resize;
3815    }
3816    .ui-resizable-se {
3817      right: 1px;
3818      bottom: 1px;
3819      width: 12px;
3820      height: 12px;
3821      cursor: se-resize;
3822    }
3823    .ui-resizable-sw {
3824      bottom: -5px;
3825      left: -5px;
3826      width: 9px;
3827      height: 9px;
3828      cursor: sw-resize;
3829    }
3830    .ui-resizable-nw {
3831      top: -5px;
3832      left: -5px;
3833      width: 9px;
3834      height: 9px;
3835      cursor: nw-resize;
3836    }
3837    .ui-resizable-ne {
3838      top: -5px;
3839      right: -5px;
3840      width: 9px;
3841      height: 9px;
3842      cursor: ne-resize;
3843    }
3844    /* Selectable
3845     ========================================================================== */
3846    /**
3847   * jQuery UI Selectable.
3848   *
3849   * Some classes and HTML elements generally added via JavaScript, more info -
3850   * https://jqueryui.com/selectable/
3851   *
3852   * Example HTML:
3853   *
3854   * <ol class="ui-selectable">
3855   *     <li class="ui-selectee">Item 1</li>
3856   *     <li class="ui-selectee ui-selected">Item 2 (selected)</li>
3857   *     <li class="ui-selectee">Item 3</li>
3858   *     <li class="ui-selectee">Item 4</li>
3859   * </ol>
3860   */
3861    .ui-selectable {
3862      -ms-touch-action: none;
3863          touch-action: none;
3864    }
3865    /**
3866   * Drag to select.
3867   */
3868    .ui-selectable-helper {
3869      position: absolute;
3870      border: 1px dotted #996633;
3871      z-index: 100;
3872    }
3873    /* Sortable
3874   ========================================================================== */
3875    /**
3876   * jQuery UI Sortable.
3877   *
3878   * Some classes and HTML elements generally added via JavaScript, more info -
3879   * https://jqueryui.com/sortable/
3880   *
3881   * Example HTML:
3882   *
3883   * <ul class="ui-sortable">
3884   *     <li>
3885   *         Item 1
3886   *     </li>
3887   *     <li class="ui-sortable-helper">
3888   *         Item 2 (this item is currently being actively sorted)
3889   *     </li>
3890   *     <li class="ui-sortable-placeholder"></li>
3891   *     <li>
3892   *         Item 3
3893   *     </li>
3894   * </ul>
3895   */
3896    .ui-sortable-helper {
3897      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
3898    }
3899    .ui-sortable-handle {
3900      -ms-touch-action: none;
3901          touch-action: none;
3902    }
3903    .ui-sortable-placeholder {
3904      border: 1px dotted #996633;
3905    }
3906    /* Accordion
3907     ========================================================================== */
3908    /**
3909   * jQuery UI Accordion.
3910   *
3911   * Some classes and HTML elements generally added via JavaScript, more info -
3912   * https://jqueryui.com/accordion/
3913   *
3914   * Example HTML:
3915   *
3916   * <div class="ui-accordion">
3917   *     <h3 class="ui-accordion-header">
3918   *         <span class="ui-accordion-header-icon"></span>
3919   *         <a>Section 1 lever</a>
3920   *     </h3>
3921   *     <div class="ui-accordion-content">
3922   *         Section 1 content
3923   *     </div>
3924   *     <h3 class="ui-accordion-header">
3925   *         <span class="ui-accordion-header-icon"></span>
3926   *         <a>Section 2 lever</a>
3927   *     </h3>
3928   *     <div class="ui-accordion-content">
3929   *         Section 2 content
3930   *     </div>
3931   * </div>
3932   */
3933    .ui-accordion .ui-accordion-header {
3934      display: block;
3935      position: relative;
3936      margin: 2px 0 0;
3937      padding: 0.5em 1em;
3938      cursor: pointer;
3939    }
3940    .ui-accordion .ui-accordion-header a {
3941      color: #333333;
3942      text-decoration: none;
3943    }
3944    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
3945      position: absolute;
3946      top: 50%;
3947      left: 0.5em;
3948      margin-top: -8px;
3949    }
3950    .ui-accordion .ui-accordion-content {
3951      padding: 1px 1em;
3952      border-top: 0;
3953      overflow: auto;
3954    }
3955    .ui-accordion .ui-accordion-icons,
3956    .ui-accordion .ui-accordion-icons .ui-accordion-icons {
3957      padding-left: 1.7142857em;
3958    }
3959    /**
3960   * Accordion RTL support.
3961   */
3962    [dir="rtl"] .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
3963      right: 0.5em;
3964      left: auto;
3965    }
3966    [dir="rtl"] .ui-accordion .ui-accordion-icons,
3967    [dir="rtl"] .ui-accordion .ui-accordion-icons .ui-accordion-icons {
3968      padding-right: 1.7142857em;
3969      padding-left: 0;
3970    }
3971    /* Autocomplete
3972     ========================================================================== */
3973    /**
3974   * jQuery UI Autocomplete.
3975   *
3976   * Some classes and HTML elements generally added via JavaScript, more info -
3977   * https://jqueryui.com/autocomplete/
3978   *
3979   * Example HTML:
3980   *
3981   * <input type="text" class="ui-autocomplete-input">
3982   * <ul class="ui-autocomplete">
3983   *     <li><a></a></li>
3984   *     <li><a></a></li>
3985   *     <li><a></a></li>
3986   * </ul>
3987   */
3988    .ui-autocomplete {
3989      position: absolute;
3990      top: 0;
3991      left: 0;
3992      cursor: default;
3993    }
3994    /* Button
3995     ========================================================================== */
3996    /**
3997   * jQuery UI Button.
3998   *
3999   * Some classes and HTML elements generally added via JavaScript, more info -
4000   * https://jqueryui.com/button/
4001   *
4002   * 1. Correct font size not being inherited in all browsers.
4003   * 2. Improve usability and consistency of cursor style between image-type
4004   *    `input` and others.
4005   * 3. The `overflow` property removes extra width in IE.
4006   * 4. Remove iOS Safari default styling.
4007   *
4008   * Example HTML:
4009   *
4010   * <a class="ui-button ui-corner-all ui-widget">Button</a>
4011   */
4012    .ui-button {
4013      display: inline-block;
4014      position: relative;
4015      height: 2.1666667em;
4016      margin: 0 0.1em 0 0;
4017      padding: 0.25em 0.75em;
4018      border: 1px solid;
4019      border-color: #dddddd #c7c7c7 #c7c7c7 #dddddd;
4020      background-clip: padding-box;
4021      background-color: #e2e2e2;
4022      color: #333333;
4023      font-family: Helvetica, Arial, sans-serif;
4024      /* 1 */
4025      font-size: 12px;
4026      line-height: 1.5em;
4027      text-align: center;
4028      /* 2 */
4029      cursor: pointer;
4030      /* 3 */
4031      overflow: visible;
4032      vertical-align: baseline;
4033      box-sizing: border-box;
4034      /* 4 */
4035      -webkit-appearance: none;
4036         -moz-appearance: none;
4037              appearance: none;
4038      -webkit-user-select: none;
4039         -moz-user-select: none;
4040          -ms-user-select: none;
4041              user-select: none;
4042    }
4043    .ui-button:hover {
4044      border-color: #cccccc #b7b7b7 #b7b7b7 #cccccc;
4045      background-color: #eeeeee;
4046      color: #333333;
4047      text-decoration: none;
4048    }
4049    .ui-button:active {
4050      border-color: #cccccc #b7b7b7 #b7b7b7 #cccccc;
4051      background-color: #dddddd;
4052      color: #1a1a1a;
4053      text-decoration: none;
4054    }
4055    .ui-button:focus {
4056      border-color: #5b9dd9;
4057      outline: 0;
4058    }
4059    /**
4060   * Focus styling for buttons.
4061   *
4062   * 1. `!important` required to override specificity.
4063   */
4064    .ui-button.ui-state-focus {
4065      /* 1 */
4066      border-color: #5b9dd9 !important;
4067    }
4068    /**
4069   * Single-icon-only button.
4070   *
4071   * To make room for the icon, a width needs to be set here.
4072   *
4073   * Example HTML:
4074   *
4075   * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
4076   *     <span class="ui-button-icon ui-icon ui-icon-gear"></span>
4077   *     <span class="ui-button-icon-space"> </span>
4078   *     Button one icon, no text
4079   * </a>
4080   */
4081    .ui-button-icon-only {
4082      width: 2.1666667em;
4083      text-indent: -9999px;
4084      white-space: nowrap;
4085      box-sizing: border-box;
4086    }
4087    /**
4088   * No icon support for input elements.
4089   */
4090    input.ui-button.ui-button-icon-only {
4091      text-indent: 0;
4092    }
4093    /**
4094   * Button icon element(s).
4095   */
4096    .ui-button-icon-only .ui-icon {
4097      position: absolute;
4098      top: 50%;
4099      left: 50%;
4100      margin-top: -8px;
4101      margin-left: -8px;
4102    }
4103    .ui-button.ui-icon-notext .ui-icon {
4104      padding: 0;
4105      text-indent: -9999px;
4106      white-space: nowrap;
4107    }
4108    input.ui-button.ui-icon-notext .ui-icon {
4109      padding: 0.4em 1em;
4110      text-indent: 0;
4111      white-space: normal;
4112    }
4113    /* Checkboxradio
4114     ========================================================================== */
4115    /**
4116   * jQuery UI Checkboxradio.
4117   *
4118   * Some classes and HTML elements generally added via JavaScript, more info -
4119   * https://jqueryui.com/checkboxradio/
4120   *
4121   * Example HTML:
4122   *
4123   * <fieldset>
4124   *     <legend>Select a Location:</legend>
4125   *     <label for="radio-1">New York</label>
4126   *     <input id="radio-1" name="radio-1" type="radio">
4127   *     <label for="radio-2">Paris</label>
4128   *     <input id="radio-2" name="radio-1" type="radio">
4129   *     <label for="radio-3">London</label>
4130   *     <input id="radio-3" name="radio-1" type="radio">
4131   * </fieldset>
4132   */
4133    .ui-checkboxradio-label .ui-icon-background {
4134      border: 0;
4135      border-radius: 0.12em;
4136      box-shadow: inset 1px 1px 1px #cccccc;
4137    }
4138    .ui-checkboxradio-radio-label .ui-icon-background {
4139      width: 16px;
4140      height: 16px;
4141      border: 0;
4142      border-radius: 1em;
4143      overflow: visible;
4144    }
4145    .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
4146      width: 8px;
4147      height: 8px;
4148      border-width: 4px;
4149      border-style: solid;
4150      background-image: none;
4151    }
4152    .ui-checkboxradio-disabled {
4153      pointer-events: none;
4154    }
4155    /**
4156   * Checkboxes as buttons - pressed state.
4157   *
4158   * Example HTML:
4159   *
4160   * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
4161   * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
4162   */
4163    .ui-checkboxradio-checked.ui-button {
4164      background-color: #fff8dd;
4165    }
4166    .ui-checkboxradio-checked.ui-button:hover {
4167      background-color: #fffdf7;
4168    }
4169    .ui-checkboxradio-checked.ui-button:active {
4170      background-color: #fff0b4;
4171    }
4172    /* Controlgroup
4173     ========================================================================== */
4174    /**
4175   * jQuery UI Controlgroup.
4176   *
4177   * Some classes and HTML elements generally added via JavaScript, more info -
4178   * https://jqueryui.com/controlgroup/
4179   *
4180   * Example HTML:
4181   *
4182   * <fieldset>
4183   *     <legend>Favourite drink</legend>
4184   *     <div id="radio">
4185   *         <input id="tea" name="drink" type="radio">
4186   *         <label for="tea">Tea</label>
4187   *         <input id="coffee" name="drink" type="radio" checked="checked">
4188   *         <label for="coffee">Coffee</label>
4189   *         <input id="tequila" name="drink" type="radio">
4190   *         <label for="tequila">Tequila</label>
4191   *     </div>
4192   * </fieldset>
4193   */
4194    .ui-controlgroup {
4195      display: -ms-inline-flexbox;
4196      display: inline-flex;
4197      -ms-flex-flow: row wrap;
4198          flex-flow: row wrap;
4199    }
4200    .ui-controlgroup .ui-controlgroup-item {
4201      margin-right: 0;
4202      margin-left: 0;
4203    }
4204    .ui-controlgroup .ui-controlgroup-item:focus, .ui-controlgroup .ui-controlgroup-item.ui-visual-focus {
4205      z-index: 9999;
4206    }
4207    .ui-controlgroup .ui-controlgroup-label {
4208      padding: 0.4em 1em;
4209    }
4210    .ui-controlgroup .ui-controlgroup-label span {
4211      font-size: 80%;
4212    }
4213    .ui-controlgroup .ui-state-highlight {
4214      background-color: #fff8dd;
4215    }
4216    .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
4217      border-left: 0;
4218    }
4219    .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
4220      border-right: 0;
4221    }
4222    .ui-controlgroup-vertical {
4223      -ms-flex-flow: column;
4224          flex-flow: column;
4225    }
4226    .ui-controlgroup-vertical .ui-controlgroup-item {
4227      display: block;
4228      width: 100%;
4229      margin-top: 0;
4230      margin-bottom: 0;
4231      text-align: left;
4232      box-sizing: border-box;
4233    }
4234    [dir="rtl"] .ui-controlgroup-vertical .ui-controlgroup-item {
4235      text-align: right;
4236    }
4237    .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
4238      border-top: 0;
4239    }
4240    .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
4241      border-bottom: 0;
4242    }
4243    /**
4244   * Spinner specific style fixes.
4245   */
4246    .ui-controlgroup-vertical .ui-spinner-input {
4247      width: calc(100% - 2.4em);
4248    }
4249    .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
4250      border-top-style: solid;
4251    }
4252    /* Datepicker
4253     ========================================================================== */
4254    /**
4255   * jQuery UI Datepicker.
4256   *
4257   * Some classes and HTML elements generally added via JavaScript, more info -
4258   * https://jqueryui.com/datepicker/
4259   *
4260   * Example HTML:
4261   *
4262   * <div class="ui-datepicker">
4263   *     <div class="ui-datepicker-header">
4264   *         <a class="ui-datepicker-prev">
4265   *             <span>Prev</span>
4266   *         </a>
4267   *         <a class="ui-datepicker-next">
4268   *             <span>Next</span>
4269   *         </a>
4270   *         <div class="ui-datepicker-title">
4271   *             <span class="ui-datepicker-month">April</span>
4272   *             <span class="ui-datepicker-year">2014</span>
4273   *         </div>
4274   *     </div>
4275   *     <table class="ui-datepicker-calendar">
4276   *         <thead>
4277   *             <tr>
4278   *                 <th class="ui-datepicker-week-end">
4279   *                     <span>Su</span>
4280   *                 </th>
4281   *                 <th>
4282   *                     <span>Mo</span>
4283   *                 </th>
4284   *                 <th>
4285   *                     <span>Tu</span>
4286   *                 </th>
4287   *                 <th>
4288   *                     <span>We</span>
4289   *                 </th>
4290   *                 <th>
4291   *                     <span>Th</span>
4292   *                 </th>
4293   *                 <th>
4294   *                     <span>Fr</span>
4295   *                 </th>
4296   *                 <th class="ui-datepicker-week-end">
4297   *                     <span>Sa</span>
4298   *                 </th>
4299   *             </tr>
4300   *         </thead>
4301   *         <tbody>
4302   *             <tr>
4303   *                 <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable">
4304   *                     &nbsp;
4305   *                 </td>
4306   *                 <td class="ui-datepicker-other-month ui-datepicker-unselectable">
4307   *                     &nbsp;
4308   *                 </td>
4309   *                 <td>
4310   *                     <a>1</a>
4311   *                 </td>
4312   *                 <td>
4313   *                     <a>2</a>
4314   *                 </td>
4315   *                 <td>
4316   *                     <a>3</a>
4317   *                 </td>
4318   *                 <td class="ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today">
4319   *                     <a class="ui-state-highlight ui-state-active">4</a>
4320   *                 </td>
4321   *                 <td>
4322   *                     <a>5</a>
4323   *                 </td>
4324   *             </tr>
4325   *             ...etc...
4326   *         </tbody>
4327   *     </table>
4328   * </div>
4329   */
4330    .ui-datepicker {
4331      display: none;
4332      width: 17em;
4333      padding: 0.25em 0.25em 0;
4334      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4335    }
4336    .ui-datepicker .ui-datepicker-header {
4337      position: relative;
4338      padding: 0.25em 0;
4339    }
4340    .ui-datepicker .ui-datepicker-prev,
4341    .ui-datepicker .ui-datepicker-next {
4342      position: absolute;
4343      top: 0.25em;
4344      width: 1.8em;
4345      height: 1.8em;
4346      border-radius: 0.5em;
4347      background-color: transparent;
4348    }
4349    .ui-datepicker .ui-datepicker-prev {
4350      left: 0.25em;
4351    }
4352    .ui-datepicker .ui-datepicker-next {
4353      right: 0.25em;
4354    }
4355    .ui-datepicker .ui-datepicker-prev span,
4356    .ui-datepicker .ui-datepicker-next span {
4357      display: block;
4358      position: absolute;
4359      top: 50%;
4360      left: 50%;
4361      margin-top: -8px;
4362      margin-left: -8px;
4363    }
4364    .ui-datepicker .ui-datepicker-prev-hover,
4365    .ui-datepicker .ui-datepicker-next-hover {
4366      background-color: #f7f7f7;
4367    }
4368    .ui-datepicker .ui-datepicker-title {
4369      margin: 0 2.2em;
4370      line-height: 1.8em;
4371      text-align: center;
4372    }
4373    .ui-datepicker .ui-datepicker-title select {
4374      margin: 0;
4375    }
4376    .ui-datepicker select.ui-datepicker-month,
4377    .ui-datepicker select.ui-datepicker-year {
4378      width: 45%;
4379    }
4380    .ui-datepicker table {
4381      width: 100%;
4382      margin: 0 0 0.25em;
4383    }
4384    .ui-datepicker th {
4385      padding: 0.5em 0.25em;
4386      border: 0;
4387      text-align: center;
4388    }
4389    .ui-datepicker td {
4390      padding: 1px;
4391      border: 0;
4392    }
4393    .ui-datepicker td a,
4394    .ui-datepicker td span {
4395      display: block;
4396      padding: 0.25em;
4397      text-align: center;
4398    }
4399    .ui-datepicker td a.ui-state-active {
4400      background-color: #fff8dd;
4401    }
4402    .ui-datepicker td a.ui-state-highlight {
4403      border-color: #cccccc;
4404      background-color: #dff0d8;
4405    }
4406    .ui-datepicker td a.ui-state-highlight:hover {
4407      background-color: #eef7ea;
4408    }
4409    .ui-datepicker td a.ui-state-active:hover {
4410      background-color: #fffdf7;
4411    }
4412    .ui-datepicker td.ui-datepicker-week-col {
4413      padding: 0.32em 0;
4414      text-align: center;
4415    }
4416    .ui-datepicker .ui-datepicker-buttonpane {
4417      margin: 0.7em 0 0;
4418      padding: 0 0.25em;
4419      border-right: 0;
4420      border-bottom: 0;
4421      border-left: 0;
4422      background-image: none;
4423    }
4424    .ui-datepicker .ui-datepicker-buttonpane button {
4425      width: auto;
4426      margin: 0.5em 0.25em 0.4em;
4427      padding: 0.25em 0.6em 0.3em;
4428      float: right;
4429      cursor: pointer;
4430      overflow: visible;
4431    }
4432    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
4433      float: left;
4434    }
4435    .ui-datepicker .ui-icon {
4436      display: block;
4437      top: 0.3em;
4438      left: 0.5em;
4439      background-repeat: no-repeat;
4440      text-indent: -9999px;
4441      overflow: hidden;
4442    }
4443    /**
4444   * Multiple calendars.
4445   */
4446    .ui-datepicker.ui-datepicker-multi {
4447      width: auto;
4448    }
4449    .ui-datepicker-multi .ui-datepicker-group {
4450      float: left;
4451    }
4452    .ui-datepicker-multi .ui-datepicker-group table {
4453      width: 95%;
4454      margin: 0 auto 0.4em;
4455    }
4456    .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
4457    .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
4458      border-left-width: 0;
4459    }
4460    .ui-datepicker-multi .ui-datepicker-buttonpane {
4461      clear: left;
4462    }
4463    .ui-datepicker-multi-2 .ui-datepicker-group {
4464      width: 50%;
4465    }
4466    .ui-datepicker-multi-3 .ui-datepicker-group {
4467      width: 33.3%;
4468    }
4469    .ui-datepicker-multi-4 .ui-datepicker-group {
4470      width: 25%;
4471    }
4472    .ui-datepicker-row-break {
4473      width: 100%;
4474      clear: both;
4475      font-size: 0;
4476    }
4477    /**
4478   * Datepicker RTL support.
4479   */
4480    [dir="rtl"] .ui-datepicker-prev {
4481      right: 0.25em;
4482      left: auto;
4483    }
4484    [dir="rtl"] .ui-datepicker-prev span {
4485      background-position: -48px -192px;
4486    }
4487    [dir="rtl"] .ui-datepicker-next {
4488      right: auto;
4489      left: 0.25em;
4490    }
4491    [dir="rtl"] .ui-datepicker-next span {
4492      background-position: -80px -192px;
4493    }
4494    [dir="rtl"] .ui-datepicker-buttonpane {
4495      clear: right;
4496    }
4497    [dir="rtl"] .ui-datepicker-buttonpane button {
4498      float: left;
4499    }
4500    [dir="rtl"] .ui-datepicker-buttonpane button.ui-datepicker-current,
4501    [dir="rtl"] .ui-datepicker-group {
4502      float: right;
4503    }
4504    [dir="rtl"] .ui-datepicker-group-last .ui-datepicker-header,
4505    [dir="rtl"] .ui-datepicker-group-middle .ui-datepicker-header {
4506      border-right-width: 0;
4507      border-left-width: 1px;
4508    }
4509    /* Dialog
4510     ========================================================================== */
4511    /**
4512   * jQuery UI Dialog.
4513   *
4514   * Some classes and HTML elements generally added via JavaScript, more info -
4515   * https://jqueryui.com/dialog/
4516   *
4517   * Example HTML:
4518   *
4519   * <div class="ui-dialog ui-front ui-dialog-buttons ui-draggable">
4520   *     <div class="ui-dialog-titlebar">
4521   *         <span class="ui-dialog-title">Modal dialog example</span>
4522   *         <button class="ui-button ui-button-icon-only ui-dialog-titlebar-close">
4523   *             <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
4524   *             <span class="ui-button-text">close</span>
4525   *         </button>
4526   *     </div>
4527   *     <div class="ui-dialog-content">
4528   *         Content
4529   *     </div>
4530   *     <div class="ui-dialog-buttonpane">
4531   *         <div class="ui-dialog-buttonset">
4532   *             <button class="ui-button ui-button-text-only">
4533   *                 <span class="ui-button-text">Cancel</span>
4534   *             </button>
4535   *             <button class="ui-button ui-button-text-only">
4536   *                 <span class="ui-button-text">Ok</span>
4537   *             </button>
4538   *         </div>
4539   *     </div>
4540   * </div>
4541   */
4542    .ui-dialog {
4543      position: absolute;
4544      top: 0;
4545      left: 0;
4546      padding: 0.25em;
4547      outline: 0;
4548      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4549      z-index: 1002;
4550    }
4551    .ui-dialog .ui-dialog-titlebar {
4552      position: relative;
4553      padding: 0.4em 1em;
4554    }
4555    .ui-dialog .ui-dialog-title {
4556      width: 90%;
4557      margin: 0.1em 0;
4558      float: left;
4559      text-overflow: ellipsis;
4560      white-space: nowrap;
4561      overflow: hidden;
4562    }
4563    [dir="rtl"] .ui-dialog .ui-dialog-title {
4564      float: right;
4565    }
4566    .ui-dialog .ui-dialog-titlebar-close {
4567      position: absolute;
4568      top: 50%;
4569      right: 0.3em;
4570      width: 20px;
4571      height: 20px;
4572      margin: -10px 0 0;
4573    }
4574    [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
4575      right: auto;
4576      left: 0.3em;
4577    }
4578    .ui-dialog .ui-dialog-content {
4579      position: relative;
4580      padding: 0.5em 1em;
4581      border: 0;
4582      background: none;
4583      overflow: auto;
4584    }
4585    .ui-dialog .ui-dialog-buttonpane {
4586      margin-top: 0.5em;
4587      padding: 0.5em;
4588      border-width: 1px 0 0;
4589      background-image: none;
4590      text-align: left;
4591    }
4592    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
4593      float: right;
4594    }
4595    [dir="rtl"] .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
4596      float: left;
4597    }
4598    .ui-dialog .ui-dialog-buttonpane button {
4599      margin: 0.5em 0.4em 0.5em 0;
4600      cursor: pointer;
4601    }
4602    [dir="rtl"] .ui-dialog .ui-dialog-buttonpane button {
4603      margin: 0.5em 0 0.5em 0.4em;
4604    }
4605    /**
4606   * Change cursor when window is being dragged.
4607   */
4608    .ui-draggable .ui-dialog-titlebar {
4609      cursor: move;
4610    }
4611    /* Menu
4612     ========================================================================== */
4613    /**
4614   * jQuery UI Menu.
4615   *
4616   * Menus are vertical format only. Horizontal format menus are not provided by
4617   * jQuery UI.
4618   *
4619   * Some classes and HTML elements generally added via JavaScript, more info -
4620   * https://jqueryui.com/menu/
4621   *
4622   * 1. Correct font size not being inherited in all browsers.
4623   * 2. Workaround for IE 11 and Edge incorrectly displaying a list marker.
4624   *
4625   * Example HTML:
4626   *
4627   * <ul class="ui-menu">
4628   *     <li class="ui-state-disabled ui-menu-item">
4629   *         <a>Item 1 (disabled)</a>
4630   *     </li>
4631   *     <li class="ui-menu-item">
4632   *         <a>Item 2</a>
4633   *     </li>
4634   *     <li class="ui-menu-item">
4635   *         <a>
4636   *             <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
4637   *             Item 3
4638   *         </a>
4639   *         <ul class="ui-menu">
4640   *             <li class="ui-menu-item">
4641   *                 <a>Item 3 subitem 1</a>
4642   *             </li>
4643   *             <li class="ui-menu-item">
4644   *                 <a>Item 3 subitem 2</a>
4645   *             </li>
4646   *         </ul>
4647   *     </li>
4648   *     <li class="ui-menu-item">
4649   *         <a>
4650   *             <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
4651   *             Item 4
4652   *         </a>
4653   *         <ul class="ui-menu">
4654   *             <li class="ui-menu-item">
4655   *                 <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
4656   *                 <a>Item 4 subitem 1</a>
4657   *                 <ul class="ui-menu">
4658   *                     <li class="ui-menu-item">
4659   *                         <a>Item 4 subitem 1 subsubitem 1</a>
4660   *                     </li>
4661   *                     <li class="ui-menu-item">
4662   *                         <a>Item 4 subitem 1 subsubitem 2</a>
4663   *                     </li>
4664   *                 </ul>
4665   *             </li>
4666   *             <li class="ui-menu-item">
4667   *                 <a>Item 3 subitem 2</a>
4668   *             </li>
4669   *         </ul>
4670   *     </li>
4671   * </ul>
4672   */
4673    .ui-menu {
4674      display: block;
4675      margin: 0;
4676      padding: 0;
4677      border-color: #d4d4d4;
4678      outline: 0;
4679      /* 1 */
4680      font-size: 12px;
4681      line-height: 1.5em;
4682      list-style: none;
4683      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4684    }
4685    .ui-menu .ui-menu {
4686      position: absolute;
4687    }
4688    .ui-menu .ui-menu-item {
4689      margin: 0;
4690      cursor: pointer;
4691      /* 2 */
4692      list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
4693    }
4694    .ui-menu .ui-menu-item a {
4695      color: #333333;
4696      text-decoration: none;
4697    }
4698    .ui-menu .ui-menu-item-wrapper {
4699      position: relative;
4700      padding: 0.25em 1.25em 0.25em 0.75em;
4701    }
4702    .ui-menu .ui-menu-divider {
4703      height: 0;
4704      margin: 0.25em 0;
4705      border-width: 1px 0 0;
4706      font-size: 0;
4707      line-height: 0;
4708    }
4709    .ui-menu .ui-state-focus,
4710    .ui-menu .ui-state-active {
4711      background-color: #e3edfc;
4712    }
4713    .ui-menu .ui-icon {
4714      position: absolute;
4715      top: 0;
4716      bottom: 0;
4717      left: 0.25em;
4718      margin: auto 0;
4719    }
4720    .ui-menu .ui-menu-icon {
4721      right: 0;
4722      left: auto;
4723    }
4724    /**
4725   * Allow additional icons in menu items.
4726   */
4727    .ui-menu-icons {
4728      position: relative;
4729    }
4730    .ui-menu-icons .ui-menu-item-wrapper {
4731      padding-left: 2em;
4732    }
4733    /**
4734   * Menu RTL support.
4735   */
4736    [dir="rtl"] .ui-menu {
4737      padding: 0;
4738    }
4739    [dir="rtl"] .ui-menu .ui-menu-item-wrapper {
4740      padding: 0.25em 0.75em 0.25em 1.25em;
4741    }
4742    [dir="rtl"] .ui-menu .ui-icon {
4743      right: 0.25em;
4744      left: auto;
4745    }
4746    [dir="rtl"] .ui-menu .ui-menu-icon {
4747      right: auto;
4748      left: 0;
4749    }
4750    /* Progressbar
4751     ========================================================================== */
4752    /**
4753   * jQuery UI Progressbar.
4754   *
4755   * Some classes and HTML elements generally added via JavaScript, more info -
4756   * https://jqueryui.com/progressbar/
4757   *
4758   * Example HTML:
4759   *
4760   * <div class="ui-progressbar">
4761   *     <div class="ui-progressbar-value" style="width: 37%;"></div>
4762   * </div>
4763   */
4764    .ui-progressbar {
4765      margin-bottom: 1em;
4766      text-align: left;
4767      overflow: hidden;
4768    }
4769    .ui-progressbar-value {
4770      background-image: url("../img/ui-progressbar.gif");
4771      background-size: 16px 16px;
4772      height: 16px;
4773      background-color: #c7dbfa;
4774    }
4775  }
4776  
4777  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
4778    .ui-progressbar-value {
4779      background-image: url("../img/ui-progressbar@2x.gif");
4780    }
4781  }
4782  
4783  @media screen {
4784    /**
4785   * Progressbar with indeterminate value.
4786   *
4787   * Example HTML:
4788   *
4789   * <div class="ui-progressbar ui-progressbar-indeterminate">
4790   *     <div class="ui-progressbar-value" style="width:100%;">
4791   *         <div class="ui-progressbar-overlay"></div>
4792   *     </div>
4793   * </div>
4794   */
4795    .ui-progressbar-indeterminate .ui-progressbar-value {
4796      background-image: url("../img/ui-progressbar-indeterminate.gif");
4797      background-size: 16px 16px;
4798      background-color: #cccccc;
4799    }
4800  }
4801  
4802  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
4803    .ui-progressbar-indeterminate .ui-progressbar-value {
4804      background-image: url("../img/ui-progressbar-indeterminate@2x.gif");
4805    }
4806  }
4807  
4808  @media screen {
4809    /* Selectmenu
4810     ========================================================================== */
4811    /**
4812   * jQuery UI Selectmenu.
4813   *
4814   * Some classes and HTML elements generally added via JavaScript, more info -
4815   * https://jqueryui.com/selectmenu/
4816   *
4817   * 1. Correct font size not being inherited in all browsers.
4818   *
4819   * Example HTML:
4820   *
4821   * <p>
4822   *     <label>Select a speed</label><br>
4823   *     <select class="jquery-ui-selectmenu" style="display:none;">
4824   *         <option>Slower</option>
4825   *         <option>Slow</option>
4826   *         <option selected="selected">Medium</option>
4827   *         <option>Fast</option>
4828   *         <option>Faster</option>
4829   *     </select>
4830   *     <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all">
4831   *         <span class="ui-icon ui-icon-triangle-1-s"></span>
4832   *         <span class="ui-selectmenu-text">Medium</span>
4833   *     </span>
4834   * </p>
4835   * <div class="ui-selectmenu-menu ui-front ui-selectmenu-open">
4836   *     <ul class="ui-menu ui-widget ui-widget-content ui-corner-bottom">
4837   *         <li class="ui-menu-item ui-state-focus">Slower</li>
4838   *         <li class="ui-menu-item">Slow</li>
4839   *         <li class="ui-menu-item">Medium</li>
4840   *         <li class="ui-menu-item">Fast</li>
4841   *         <li class="ui-menu-item">Faster</li>
4842   *     </ul>
4843   * </div>
4844   */
4845    .ui-selectmenu-button {
4846      display: -ms-inline-flexbox;
4847      display: inline-flex;
4848    }
4849    .ui-selectmenu-button:not(.ui-controlgroup-item) {
4850      border-radius: 0.5em;
4851    }
4852    .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr {
4853      border-radius: 0 0.5em 0.5em 0;
4854    }
4855    .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl {
4856      border-radius: 0.5em 0 0 0.5em;
4857    }
4858    .ui-selectmenu-icon {
4859      -ms-flex: none;
4860          flex: none;
4861      -ms-flex-order: 2;
4862          order: 2;
4863      margin: 0 -0.25em 0 0.25em;
4864    }
4865    .ui-selectmenu-text {
4866      display: block;
4867      text-overflow: ellipsis;
4868      white-space: nowrap;
4869      overflow: hidden;
4870    }
4871    .ui-selectmenu-menu {
4872      display: none;
4873      position: absolute;
4874      top: 0;
4875      left: 0;
4876      margin: 0;
4877      padding: 0;
4878    }
4879    .ui-selectmenu-menu .ui-menu {
4880      overflow: auto;
4881      overflow-x: hidden;
4882    }
4883    .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
4884      height: auto;
4885      margin: 0.5em 0 0;
4886      padding: 2px 0.75em;
4887      border-top: 1px solid #cccccc;
4888      font-size: 12px;
4889      font-weight: bold;
4890      line-height: 1.5;
4891    }
4892    .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup:first-child {
4893      margin: 0;
4894      border: 0;
4895    }
4896    .ui-selectmenu-open {
4897      display: block;
4898    }
4899    /**
4900   * Selectmenu RTL support.
4901   */
4902    [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr {
4903      border-radius: 0.5em 0 0 0.5em;
4904    }
4905    [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl {
4906      border-radius: 0 0.5em 0.5em 0;
4907    }
4908    [dir="rtl"] .ui-selectmenu-icon {
4909      margin: 0 0.25em 0 -0.25em;
4910    }
4911    /* Slider
4912     ========================================================================== */
4913    /**
4914   * jQuery UI Slider.
4915   *
4916   * Some classes and HTML elements generally added via JavaScript, more info -
4917   * https://jqueryui.com/slider/
4918   *
4919   * Example HTML:
4920   *
4921   * <div class="ui-slider ui-slider-horizontal">
4922   *     <div class="ui-slider-range" style="left: 17%; width: 50%;"></div>
4923   *     <a class="ui-slider-handle" style="left: 17%;"></a>
4924   *     <a class="ui-slider-handle" style="left: 67%;"></a>
4925   * </div>
4926   */
4927    .ui-slider {
4928      position: relative;
4929      text-align: left;
4930    }
4931    .ui-slider .ui-slider-handle {
4932      position: absolute;
4933      width: 20px;
4934      height: 20px;
4935      border-radius: 50%;
4936      background-color: #ffffff;
4937      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4938      cursor: default;
4939      z-index: 2;
4940      -ms-touch-action: none;
4941          touch-action: none;
4942    }
4943    .ui-slider .ui-slider-range {
4944      display: block;
4945      position: absolute;
4946      border: 0;
4947      background-position: 0 0;
4948      font-size: 0.7em;
4949      z-index: 1;
4950    }
4951    /**
4952   * Slider - horizontal format.
4953   *
4954   * Example HTML:
4955   *
4956   * <div class="ui-slider ui-slider-horizontal">
4957   */
4958    .ui-slider-horizontal {
4959      height: 12px;
4960      margin-bottom: 1em;
4961    }
4962    .ui-slider-horizontal .ui-slider-handle {
4963      top: -5px;
4964      margin-left: -10px;
4965    }
4966    .ui-slider-horizontal .ui-slider-range {
4967      top: 0;
4968      height: 100%;
4969    }
4970    .ui-slider-horizontal .ui-slider-range-min {
4971      left: 0;
4972    }
4973    .ui-slider-horizontal .ui-slider-range-max {
4974      right: 0;
4975    }
4976    /**
4977   * Slider - vertical format.
4978   *
4979   * Example HTML:
4980   *
4981   * <div class="ui-slider ui-slider-vertical">
4982   */
4983    .ui-slider-vertical {
4984      width: 12px;
4985      height: 100px;
4986    }
4987    .ui-slider-vertical .ui-slider-handle {
4988      left: -20px;
4989      margin-bottom: -10px;
4990    }
4991    .ui-slider-vertical .ui-slider-range {
4992      left: 0;
4993      width: 100%;
4994    }
4995    .ui-slider-vertical .ui-slider-range-min {
4996      bottom: 0;
4997    }
4998    .ui-slider-vertical .ui-slider-range-max {
4999      top: 0;
5000    }
5001    /* Spinner
5002     ========================================================================== */
5003    /**
5004   * jQuery UI Spinner.
5005   *
5006   * Some classes and HTML elements generally added via JavaScript, more info -
5007   * https://jqueryui.com/spinner/
5008   *
5009   * Example HTML:
5010   *
5011   * <span class="ui-spinner">
5012   *     <input type="text" class="ui-spinner-input">
5013   *     <a class="ui-spinner-button ui-spinner-up ui-button ui-button-text-only">
5014   *         <span class="ui-button-text">
5015   *             <span class="ui-icon ui-icon-triangle-1-n">+</span>
5016   *         </span>
5017   *     </a>
5018   *     <a class="ui-spinner-button ui-spinner-down ui-button ui-button-text-only">
5019   *         <span class="ui-button-text">
5020   *             <span class="ui-icon ui-icon-triangle-1-s">-</span>
5021   *         </span>
5022   *     </a>
5023   * </span>
5024   */
5025    .ui-spinner {
5026      display: inline-block;
5027      position: relative;
5028      padding: 0;
5029      border: 0;
5030      vertical-align: baseline;
5031    }
5032    .ui-spinner .ui-spinner-input {
5033      padding-right: 24px;
5034    }
5035    .ui-spinner-button {
5036      display: block;
5037      position: absolute;
5038      right: 0;
5039      width: 18px;
5040      height: 42%;
5041      margin: 0;
5042      padding: 0;
5043      font-size: 0.58333333333333em;
5044      line-height: 1.57142857142857em;
5045      cursor: default;
5046      overflow: hidden;
5047    }
5048    .ui-spinner-up {
5049      top: 0;
5050    }
5051    .ui-spinner-down {
5052      bottom: 0;
5053    }
5054    /**
5055   * Spinner RTL support.
5056   */
5057    [dir="rtl"] .ui-spinner .ui-spinner-input {
5058      padding-right: 4px;
5059      padding-left: 24px;
5060    }
5061    [dir="rtl"] .ui-spinner-button {
5062      right: auto;
5063      left: 0;
5064    }
5065    /* Tabs
5066     ========================================================================== */
5067    /**
5068   * jQuery UI Tabs.
5069   *
5070   * Some classes and HTML elements generally added via JavaScript, more info -
5071   * https://jqueryui.com/tabs/
5072   *
5073   * 1. `position: relative` prevents IE scroll bug (elements with
5074   *    `position: relative` inside a parent container with `overflow: auto`
5075   *    appear as "fixed")
5076   *
5077   * Example HTML:
5078   *
5079   * <div class="ui-tabs>
5080   *     <ul class="ui-tabs-nav">
5081   *         <li class="ui-tabs-active">
5082   *             <a class="ui-tabs-anchor">Tab 1</a>
5083   *         </li>
5084   *         <li>
5085   *             <a class="ui-tabs-anchor">Tab 2</a>
5086   *         </li>
5087   *         <li>
5088   *             <a class="ui-tabs-anchor">Tab 3</a>
5089   *         </li>
5090   *     </ul>
5091   *     <div class="ui-tabs-panel" aria-expanded="true">
5092   *         Tab 1 content
5093   *     </div>
5094   *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
5095   *         Tab 2 content
5096   *     </div>
5097   *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
5098   *         Tab 3 content
5099   *     </div>
5100   * </div>
5101   */
5102    .ui-tabs:not(.ui-tabs-vertical) {
5103      /* 1 */
5104      position: relative;
5105      border: 0;
5106    }
5107    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav {
5108      margin: 0;
5109      padding: 0;
5110      background: none;
5111    }
5112    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
5113      position: relative;
5114      top: 0;
5115      margin-right: 2px;
5116      float: left;
5117      border-bottom-width: 0;
5118      border-top-left-radius: 0.75em 2em;
5119      border-top-right-radius: 0.75em 2em;
5120      background-color: #fff8dd;
5121      list-style: none;
5122      white-space: nowrap;
5123      box-shadow: inset 0 -0.2em 0.4em rgba(219, 203, 141, 0.5);
5124    }
5125    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li:hover {
5126      border-color: #aaaaaa;
5127      background-color: #fffdf7;
5128    }
5129    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active {
5130      margin-bottom: -1px;
5131      padding-bottom: 1px;
5132      background-color: #ffffff;
5133      box-shadow: none;
5134    }
5135    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
5136    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
5137    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
5138      cursor: text;
5139    }
5140    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor {
5141      padding: 0.1666667em 1.5em;
5142      float: left;
5143      color: #333333;
5144      text-decoration: none;
5145    }
5146    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-panel {
5147      display: block;
5148      margin: 0 0 1em;
5149      padding: 1px 0;
5150      border-width: 1px 0;
5151      background: none;
5152    }
5153    /**
5154   * Maintain cursor style when collapsing a collapsible tab.
5155   */
5156    .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
5157      cursor: pointer;
5158    }
5159    /**
5160   * Tabs RTL support.
5161   */
5162    [dir="rtl"] .ui-tabs .ui-tabs-nav li {
5163      margin-right: 0;
5164      margin-left: 2px;
5165      float: right;
5166    }
5167    [dir="rtl"] .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
5168      float: right;
5169    }
5170    /**
5171   * Additonal styling for tabs vertical.
5172   */
5173    .ui-tabs-vertical .ui-tabs-nav .ui-tabs-active {
5174      background: #fff8dd;
5175    }
5176    .ui-tabs-vertical .ui-tabs-nav .ui-state-focus a {
5177      outline: thin solid #5b9dd9;
5178    }
5179    /* Tooltip
5180     ========================================================================== */
5181    /**
5182   * jQuery UI Tooltip.
5183   *
5184   * Some classes and HTML elements generally added via JavaScript, more info -
5185   * https://jqueryui.com/tooltip/
5186   *
5187   * Example HTML:
5188   *
5189   * <a>Link with a tooltip</a>
5190   * <div class="ui-tooltip">
5191   *     <div class="ui-tooltip-content">
5192   *         Content
5193   *     </div>
5194   * </div>
5195   */
5196    .ui-tooltip {
5197      position: absolute;
5198      max-width: 22em;
5199      padding: 0.5em 1em;
5200      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
5201      z-index: 9999;
5202    }
5203  }
5204  
5205  /* ==========================================================================
5206     Animation `keyframes` need to appear outside of `screen` rules
5207     ========================================================================== */
5208  @keyframes messageflash {
5209    0% {
5210      opacity: 0;
5211    }
5212    75% {
5213      opacity: 0.5;
5214    }
5215    50%,
5216    100% {
5217      opacity: 1;
5218    }
5219  }
5220  
5221  /* ==========================================================================
5222     Styling and layout for print media
5223     ========================================================================== */
5224  @media print {
5225    /**
5226   * Remove unnecessary global styling from printed media.
5227   */
5228    *,
5229    *::before,
5230    *::after,
5231    *::first-letter,
5232    p::first-line,
5233    div::first-line,
5234    blockquote::first-line,
5235    li::first-line {
5236      background: transparent !important;
5237      color: #000000 !important;
5238      text-shadow: none !important;
5239      box-shadow: none !important;
5240    }
5241    /**
5242   * Use a print-friendly font and size.
5243   */
5244    body {
5245      font-family: sans-serif;
5246      font-size: 8pt;
5247      line-height: 1.5;
5248    }
5249    /**
5250   * Hide unnecessary content from print.
5251   */
5252    nav,
5253    audio,
5254    video,
5255    .txp-header,
5256    .txp-footer,
5257    .txp-search,
5258    .txp-navigation,
5259    .txp-actions,
5260    .txp-control-panel,
5261    .txp-list-options,
5262    .txp-list-col-multi-edit,
5263    .multi-edit,
5264    .pophelp,
5265    .pophelpsubtle,
5266    #messagepane,
5267    #content_switcher,
5268    #view_modes {
5269      display: none;
5270    }
5271    /**
5272   * Make sure links are not underlined.
5273   */
5274    a {
5275      text-decoration: none;
5276    }
5277    /**
5278   * Ensure monospaced font is used.
5279   */
5280    pre,
5281    code,
5282    kbd,
5283    samp,
5284    var,
5285    .code {
5286      font-family: monospace;
5287    }
5288    /**
5289   * Ensure pre blocks are wrapped when printed.
5290   */
5291    pre {
5292      white-space: pre-wrap;
5293    }
5294    /**
5295   * Basic preformatted/blockquote styling.
5296   */
5297    pre,
5298    blockquote {
5299      border: 1px solid #000000;
5300      page-break-inside: avoid;
5301    }
5302    /**
5303   * Avoid images breaking across multiple pages.
5304   */
5305    img {
5306      page-break-inside: avoid;
5307    }
5308    /**
5309   * Borders on various elements.
5310   */
5311    table,
5312    input,
5313    textarea {
5314      border: 1px solid #000000;
5315    }
5316    /**
5317   * Display table head across multi-page tables.
5318   */
5319    thead {
5320      display: table-header-group;
5321    }
5322    /**
5323   * Avoid table rows breaking across multiple pages.
5324   */
5325    tr {
5326      page-break-inside: avoid;
5327    }
5328    /**
5329   * Avoid paragraph orphans and widows.
5330   */
5331    p,
5332    h1,
5333    h2,
5334    h3,
5335    h4,
5336    h5,
5337    h6 {
5338      orphans: 2;
5339      widows: 2;
5340    }
5341    /**
5342   * Avoid headings breaking across multiple pages.
5343   */
5344    h1,
5345    h2,
5346    h3,
5347    h4,
5348    h5,
5349    h6 {
5350      page-break-after: avoid;
5351    }
5352  }