@import 'compass/css3';
@import 'compass/reset';

html, body {
  font-family: sans-serif;
  font-size: 11pt;
  line-height: 1.5; }

body {
  background: #c2c2cf; }

#all { 
  background: white;
  color: #333;
  padding: 10px;
  width: 500px;
  margin: 50px auto; }

// ### Optional sprite config
// You may put any of these before the `all-icon-sprites` line.
// These are completely optional.

// #### Sprite sets: (/icon/*.png)
$icon-spacing: 0;           // How much blank space (in pixels) to put
$icon-dimensions: false;    // Sets width/height in the classes
$icon-repeat: no-repeat;
$icon-position: 0;

// #### Individual images: (/icon/mail.png)
$icon-mail-spacing: 0;
$icon-mail-repeat: no-repeat;
$icon-mail-position: 0px;

// ### Sprite setup
// For "mail.png" and "refresh.png", this creates classes for .icon-mail and
// .icon-refresh that you can @extend from.
//
// See: http://compass-style.org/help/tutorials/configuration-reference/
//
@import "icon/*.png";
@include all-icon-sprites;

.image1, .image2 {
  width: 16px; height: 16px;
  display: inline-block; }

.image1 {
  @extend .icon-mail; }

.image2 {
  @extend .icon-refresh; }

// ### Advanced control
// The sprite map is available as $icon-sprites. You can then use
// `sprite()` on it.

.image3 {
  background: sprite($icon-sprites, refresh); }
//background: url(...) 0 -16px;

.image3-with-offset {
  background: sprite($icon-sprites, refresh, -2px, -9px); }
//background: url(...) -2px -19px;