/* General setup */
.i12x12, .i14x14, .i16x16, .i18x18, .i24x24 {
  background: url("../images/icons-sprite.svg");
  display: inline-block; 

}

.i12x12 {
  height: 12px;
  width: 12px;
  background-size: 120px 12px; }

.i14x14 {
  height: 14px;
  width: 14px;
  background-size: 140px 14px; }

.i16x16 {
  height: 16px;
  width: 16px;
  background-size: 160px 16px; }

.i18x18 {
  height: 18px;
  width: 18px;
  background-size: 180px 18px; }

.i24x24 {
  height: 24px;
  width: 24px;
  background-size: 240px 24px; }

/* Help icon */
.i24x24.help {
    background-position: 0 0;
}


/* Back icon for nav-bar */
.i18x18.nav-back-arrow {
    background-position: -18px 0;
}


/* Trash can icon */
.i12x12.trash-can {
    background-position: -24px 0;
}

.i14x14.trash-can {
    background-position: -28px 0;
}

/* Gate icons */
.i18x18.single-gate {
    background-position: -54px 0;
}

.i18x18.single-gate.active {
    background-position: -72px 0;
}

.i18x18.double-gate {
    background-position: -108px 0;
}

.i18x18.double-gate.active {
    background-position: -126px 0;
}

/* Stairs icon */
.i18x18.stairs {
    background-position: -72px 0;
    background: url("../images/stairs-yellow.png");
}

    .i18x18.stairs.active {
        background-position: -72px 0;
        background: url("../images/stairs-yellow.png");
    }

    .i18x18.stairs.inactive {
        background-position: -72px 0;
        background: url("../images/stairs-inactive-alt.png");
    }


/* Clear icon */
.i24x24.clear {
    background-position: -216px;
}