/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the TEXTAREA * - the widget id is placed on the TEXTAREA element itself (there are no error messages) */

/* When the widget is in the valid state the TEXTAREA has a green background applied on it. */form.Basic_Default .textareaValidState textarea, textarea.textareaValidState { background-color:#B8F5B1;}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */form.Basic_Default .textareaFocusState textarea, textarea.textareaFocusState { background-color:#FFFFCC;}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like. * It applies only when the widget has enforce max chars enabled and the user tries to type some more. */form.Basic_Default .textareaFlashState textarea, textarea.textareaFlashState{ color: #ff0000;}/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */form.Basic_Default textarea.textareaHintState, .textareaHintState textarea{ color: #Ff0000;}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the INPUT * - the widget id is placed on the INPUT element itself (there are no error messages) */

/* When the widget is in the valid state the INPUT has a green background applied on it. */form.Basic_Default .textfieldValidState input, input.textfieldValidState { background-color:#B8F5B1;}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */form.Basic_Default .textfieldFocusState input, input.textfieldFocusState { background-color:#FFFFCC;}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like. * It applies only when the widget has character masking enabled and the user tries to type in an invalid character. */form.Basic_Default .textfieldFlashText input, input.textfieldFlashText { color: #ff0000;}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */form.Basic_Default .textfieldHintState input, input.textfieldHintState { color: #ff0000;}

/* select */

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states: * focus, required / invalid, valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the SELECT * - the widget id is placed on the SELECT element itself (there are no error messages) */

/* When the widget is in the valid state the SELECT has a green background applied on it. */form.Basic_Default .selectValidState select, select.selectValidState { background-color:#B8F5B1;}

/* When the widget is in an invalid state the SELECT has a red background applied on it. */form.Basic_Default select.selectRequiredState, .selectRequiredState select,form.Basic_Default select.selectInvalidState, .selectInvalidState select { background-color:#FF9F9F;}

/* When the widget has received focus, the SELECT has a yellow background applied on it. */form.Basic_Default .selectFocusState select, select.selectFocusState { background-color:#FFFFCC;}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid Strength / minValue / maxValue / custom invalid , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the INPUT * - the widget id is placed on the INPUT element itself (there are no error messages) */

/* When the widget is in the valid state the INPUT has a green background applied on it. */form.Basic_Default .passwordValidState input, input.passwordValidState { background-color:#B8F5B1;}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */form.Basic_Default .passwordFocusState input, input.passwordFocusState { background-color:#FFFFCC;}

/* confirm *//* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required , invalid , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the INPUT * - the widget id is placed on the INPUT element itself (there are no error messages) */

/* When the widget is in the valid state the INPUT has a green background applied on it. */form.Basic_Default .confirmValidState input, input.confirmValidState { background-color:#B8F5B1;}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */form.Basic_Default input.confirmRequiredState, .confirmRequiredState input, form.Basic_Default input.confirmInvalidState, .confirmInvalidState input{ background-color:#FF9F9F;}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */form.Basic_Default .confirmFocusState input, input.confirmFocusState { background-color:#FFFFCC;}