/**
 * Style sheet for icons sprite.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: icons.css 30 2013-11-22 15:52:54Z loops $
 */
 
.icon:before, .icon:after { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-image: url(images/icons.png); }
 
/* by default, display before element only */
.icon:before { content: ""; }
 
/* for each icon, specify the background position, the width and the height */
.icon-x:before, .icon-x:after { background-position: 0 0; width: 0px; height: 0px; }

/* color variations on effect, just change the background position */
.icon-x:focus:before, .icon-x:focus:after ,
.icon-x:active:before, .icon-x:active:after,
.icon-x:hover:before, .icon-x:hover:after { background-position: 0 0; }


/* remove the space to test x2 icons on normal resolution */
@media /** / screen, /**/ (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .icon:before, .icon:after { background-image: url(images/icons_x2.gif); background-size: 0px 0px; }
}