<h1>
    Pseudo Classes
</h1>
<p>
    CSS pseudo-classes are keywords added to selectors that
    specify special states of the element to be selected.
    For example, pseudo-class :hover will apply a style when user
    hovers over the element specified by the selector.
</p>
<p>
    Some standard pseudo-classes have limited use 
    because they get applied to specific elements only,
    and not to their ancestors. For example,
    a number of MVC input controls contain input elements.
    When input elements have the focus, they get the pseudo-class :focus,
    but the control host that contains it does not get the same.
</p>
<p>
    To handle this, we added some pseudo-classes of our
    own to make it easier to build effective forms:
</p>
<ul>
    <li>
        <b>wj-state-focused</b>:
        Added to control host elements when control contains
        the active element (not necessarily when the host element
        is the active element).
    </li>
    <li>
        <b>wj-state-invalid</b>:
        Added to control host elements when control contains
        input elements in an invalid state.
    </li>
    <li>
        <b>wj-state-empty</b>:
        Added to control host elements when control contains
        an input element with no content (this is different from
        the :empty pseudo-class which is applied to elements that
        have no children.
    </li>
    <li>
        <b>wj-state-readonly</b>:
        Added to control host elements when <b>isReadOnly</b>
        property of control is set to true.
    </li>
    <li>
        <b>wj-state-disabled</b>:
        Added to control host elements when <b>isDisabled</b> property
        of control is set to true (which corresponds to adding 
        a "disabled" attribute to the control's host element).
    </li>
</ul>
<p>
    This example shows how you can use the <b>wj-state-focused</b>
    pseudo-class to apply CSS animations to the thumb element of
    linear and radial gauges when they get the focus.
</p>
<p>
    Click the gauges below to change the current value and watch how
    their respective thumbs change:
</p>

@(Html.C1().RadialGauge().Id("theRadialGauge")
    .Value(50).Max(100).IsReadOnly(false).ThumbSize(6)
    .Face(f => f.Thickness(0.08))
    .Pointer(p => p.Thickness(0.08))
)
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .Value(50).Max(100).IsReadOnly(false)
    .ThumbSize(10)
    .Face(f => f.Thickness(0.25))
    .Pointer(p => p.Thickness(0.25))
)
