webform_structured_text.css in Webform Structured Text 6

/*
    Webform Structured Text CSS
    ===========================
    Used when field is rendered to mimic a single input field.

    Customising the look of your structured text boxes:
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    1.  Either
        a) copy the contents of CSS file into your theme's CSS file, or
        b) copy this entire file into your theme where your other CSS files are,
           rename it to <your_theme_name>_webform_structured_text.css, and then
           include it as a CSS file to be loaded (usually done through your theme's
           .info file; make sure you rename the CSS file so it's name doesn't clash
           with this file),
    and then modify the style elements as outlined below.
*/

/*  The surrounding div used to make the collection of input text boxes look like
    a single text box.  Override this selector's style in your theme to mimic how
    your input text boxes are rendered.  This will usually involve modifying border
    styles, padding, margins, and potentially the background.
*/
div.structured-text-one-field {
  border: 1px solid #CCC;
  background: #FFF;
  padding: 0.1em;
  margin: 4px 0;
  line-height: normal;
  display: inline-block !important;
}

/*  If your theme makes input text boxes appear different when the user hovers over
    them (eg., the boarder colour or background colour changes, etc.), override
    this selector in your theme.
*/
div.structured-text-one-field:hover {
}

/*  Override this selector in your theme to match how errors are highlighted in
    input text boxes.
*/
div.structured-text-one-field.has-error {
  border: 1px solid #ed541d;
}

/*  You should not need to modify this selector's styles below.  They alter the
    appearance of the inner input text fields to make them appear borderless and
    not distinct from the larger field.
*/
div.structured-text-one-field input.structured-text {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/*  You may wish to alter the background and border-bottom colours when the
    individual input boxes have focus if you are using a theme with light-coloured
    text in form fields (eg., white text on a dark background).  The colours used
    below are a pale yellow with a slightly darker yellow dotted underline, against
    which light-coloured text would be difficult to read.
*/
div.structured-text-one-field input.structured-text:focus {
  background: #FFFFDF !important;
  border-bottom: 1px dotted #FFCC00 !important;
}