<!--            <p class="options-block">Looking for enterprise HTML5, CSS3 and JavaScript web controls? 
    Check <a href="http://wemakesites.net/" target="_blank">AcidJs.WebUI</a>.</p>-->
            
<div class="css3-gaussian-blur">
    <h1>CSS3 Gaussian Blur by Acid.JS</h1>
    <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a> 
        or follow me on <a href="https://twitter.com/#!/wemakesitesnet" target="_blank">Twitter</a>.</p>
    <h2>Heading</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
        has been the industry's standard dummy text ever since the 1500s, when an unknown 
        printer took a galley of type and scrambled it to make a type specimen book. It has 
        survived not only five centuries, but also the leap into electronic typesetting, 
        remaining essentially unchanged. It was popularised in the 1960s with the release of 
        Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h3>Another Heading</h3>
    <p>It is a long established fact that a reader will be distracted by the readable 
        content of a page when looking at its layout. The point of using Lorem Ipsum is 
        that it has a more-or-less normal distribution of letters, as opposed to using 
        'Content here, content here', making it look like readable English. Many desktop 
        publishing packages and web page editors now use Lorem Ipsum as their default model 
        text, and a search for 'lorem ipsum' will uncover many web sites still in their 
        infancy. Various versions have evolved over the years, sometimes by accident, 
        sometimes on purpose (injected humour and the like).</p>

    <div>
        <figure>
            <img src="pages/css3-gaussian-blur/example/guitar.jpg" width="480" height="360" title="B.C. Rich Stealth PRO7 TNT" />
            <figcaption>B.C. Rich Stealth PRO7 TNT</figcaption>
        </figure>
    </div>

    <form>
        <fieldset>
            <legend>form elements</legend>
            <ul>
                <li><label>textbox <input value="textbox" /></label></li>
                <li><label>textbox <textarea>textarea</textarea></label></li>
                <li><label>upload <input type="file" /></label></li>
                <li><button>button</button></li>
                <li><label><input type="checkbox" /><span>checkbox</span></label></li>
                <li><label><input type="radio" /><span>radio button</span></label></li>
                <li><select>
                        <option>selectbox</option>
                        <option>selectbox</option>
                        <option>selectbox</option>
                    </select></li>
            </ul>
        </fieldset>
    </form>
</div>
        

/*
 * @CSS3 Gaussian Blur Revisited
 * @author Martin Ivanov
 * @website http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 **/

:root .css3-gaussian-blur *
{
    text-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    color: transparent !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, .05) !important;
    /* disable the pointer events for blurred zones */
    -moz-pointer-events: none !important;
    -webkit-pointer-events: none !important;
    pointer-events: none !important;
}

:root .css3-gaussian-blur input,
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur button,
:root .css3-gaussian-blur select
{
    box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 0, 0, .05) !important;
    resize: none !important;
    opacity: .5 !important;
}

:root .css3-gaussian-blur img,
:root .css3-gaussian-blur input,
:root .css3-gaussian-blur input[type="file"],
:root .css3-gaussian-blur input[type="checkbox"],
:root .css3-gaussian-blur input[type="radio"]
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur select
{
    opacity: .2 !important;
    background: transparent none !important;
}

:root .css3-gaussian-blur fieldset
{
    border-color: transparent !important;
}

/* Vendor-specific styles */
/* CSS3 filters are currently supported by Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    :root .css3-gaussian-blur img
    {
        -webkit-filter: blur(15px) !important;
        filter: blur(15px) !important;
        opacity: 1 !important; /* restore the opacity for that browser */
    }
}

/* IE<10 styles using the \9 hack */
:root .css3-gaussian-blur img
{
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    -ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    opacity: 1\9 !important;
}

:root .css3-gaussian-blur *
{
    color: #ccc !important\9;
}