/*
 * CSS3 and SVG Image Filters by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

.acidjs-img-filter
{
    display: inline-block;
    vertical-align: middle;
}

/* CSS3 and SVG filters */
.acidjs-img-filter.acidjs-img-filter-grayscale
{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#grayscale");
}

.acidjs-img-filter.acidjs-img-filter-blur
{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px); 
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#blur");
}

.acidjs-img-filter.acidjs-img-filter-sepia
{
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    filter: sepia(100%);
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#sepia");
}

.acidjs-img-filter.acidjs-img-filter-inverse
{
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    filter: invert(100%);
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#inverse");
}

.acidjs-img-filter.acidjs-img-filter-hypersaturated
{
    -webkit-filter: saturate(300%);
    -moz-filter: saturate(300%);
    filter: saturate(300%);
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#hypersaturated");
}

.acidjs-img-filter.acidjs-img-filter-oversaturated
{
    -webkit-filter: saturate(250%);
    -moz-filter: saturate(250%);
    filter: saturate(250%);
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#oversaturated");
}

/* SVG filters only */
.acidjs-img-filter.acidjs-img-filter-discrete
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#discrete");
}

.acidjs-img-filter.acidjs-img-filter-ultrared
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#ultrared");
}

.acidjs-img-filter.acidjs-img-filter-hicontrast
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#hicontrast");
}

.acidjs-img-filter.acidjs-img-filter-yellow
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#yellow");
}

.acidjs-img-filter.acidjs-img-filter-red
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#red");
}

.acidjs-img-filter.acidjs-img-filter-blue
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#blue");
}

.acidjs-img-filter.acidjs-img-filter-green
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#green");
}

.acidjs-img-filter.acidjs-img-filter-purple
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#purple");
}

.acidjs-img-filter.acidjs-img-filter-pink
{
    filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#pink");
}