/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
@403-slogan-name: '403-slogan';
@403-slogan-x: 813px;
@403-slogan-y: 527px;
@403-slogan-offset-x: -813px;
@403-slogan-offset-y: -527px;
@403-slogan-width: 267px;
@403-slogan-height: 69px;
@403-slogan-total-width: 1176px;
@403-slogan-total-height: 926px;
@403-slogan-image: '~sprite.png';
@403-slogan: 813px 527px -813px -527px 267px 69px 1176px 926px '~sprite.png' '403-slogan';
@403-name: '403';
@403-x: 0px;
@403-y: 290px;
@403-offset-x: 0px;
@403-offset-y: -290px;
@403-width: 363px;
@403-height: 318px;
@403-total-width: 1176px;
@403-total-height: 926px;
@403-image: '~sprite.png';
@403: 0px 290px 0px -290px 363px 318px 1176px 926px '~sprite.png' '403';
@404-slogan-name: '404-slogan';
@404-slogan-x: 450px;
@404-slogan-y: 318px;
@404-slogan-offset-x: -450px;
@404-slogan-offset-y: -318px;
@404-slogan-width: 267px;
@404-slogan-height: 69px;
@404-slogan-total-width: 1176px;
@404-slogan-total-height: 926px;
@404-slogan-image: '~sprite.png';
@404-slogan: 450px 318px -450px -318px 267px 69px 1176px 926px '~sprite.png' '404-slogan';
@404-name: '404';
@404-x: 450px;
@404-y: 0px;
@404-offset-x: -450px;
@404-offset-y: 0px;
@404-width: 363px;
@404-height: 318px;
@404-total-width: 1176px;
@404-total-height: 926px;
@404-image: '~sprite.png';
@404: 450px 0px -450px 0px 363px 318px 1176px 926px '~sprite.png' '404';
@500-slogan-name: '500-slogan';
@500-slogan-x: 813px;
@500-slogan-y: 458px;
@500-slogan-offset-x: -813px;
@500-slogan-offset-y: -458px;
@500-slogan-width: 275px;
@500-slogan-height: 69px;
@500-slogan-total-width: 1176px;
@500-slogan-total-height: 926px;
@500-slogan-image: '~sprite.png';
@500-slogan: 813px 458px -813px -458px 275px 69px 1176px 926px '~sprite.png' '500-slogan';
@500-name: '500';
@500-x: 813px;
@500-y: 0px;
@500-offset-x: -813px;
@500-offset-y: 0px;
@500-width: 363px;
@500-height: 318px;
@500-total-width: 1176px;
@500-total-height: 926px;
@500-image: '~sprite.png';
@500: 813px 0px -813px 0px 363px 318px 1176px 926px '~sprite.png' '500';
@add-name: 'add';
@add-x: 1167px;
@add-y: 318px;
@add-offset-x: -1167px;
@add-offset-y: -318px;
@add-width: 9px;
@add-height: 9px;
@add-total-width: 1176px;
@add-total-height: 926px;
@add-image: '~sprite.png';
@add: 1167px 318px -1167px -318px 9px 9px 1176px 926px '~sprite.png' 'add';
@arrowbg-open-name: 'arrowbg-open';
@arrowbg-open-x: 471px;
@arrowbg-open-y: 508px;
@arrowbg-open-offset-x: -471px;
@arrowbg-open-offset-y: -508px;
@arrowbg-open-width: 20px;
@arrowbg-open-height: 50px;
@arrowbg-open-total-width: 1176px;
@arrowbg-open-total-height: 926px;
@arrowbg-open-image: '~sprite.png';
@arrowbg-open: 471px 508px -471px -508px 20px 50px 1176px 926px '~sprite.png' 'arrowbg-open';
@arrowbg-name: 'arrowbg';
@arrowbg-x: 491px;
@arrowbg-y: 508px;
@arrowbg-offset-x: -491px;
@arrowbg-offset-y: -508px;
@arrowbg-width: 20px;
@arrowbg-height: 50px;
@arrowbg-total-width: 1176px;
@arrowbg-total-height: 926px;
@arrowbg-image: '~sprite.png';
@arrowbg: 491px 508px -491px -508px 20px 50px 1176px 926px '~sprite.png' 'arrowbg';
@biglogo-name: 'biglogo';
@biglogo-x: 1088px;
@biglogo-y: 458px;
@biglogo-offset-x: -1088px;
@biglogo-offset-y: -458px;
@biglogo-width: 64px;
@biglogo-height: 69px;
@biglogo-total-width: 1176px;
@biglogo-total-height: 926px;
@biglogo-image: '~sprite.png';
@biglogo: 1088px 458px -1088px -458px 64px 69px 1176px 926px '~sprite.png' 'biglogo';
@chrome-name: 'chrome';
@chrome-x: 1124px;
@chrome-y: 527px;
@chrome-offset-x: -1124px;
@chrome-offset-y: -527px;
@chrome-width: 44px;
@chrome-height: 44px;
@chrome-total-width: 1176px;
@chrome-total-height: 926px;
@chrome-image: '~sprite.png';
@chrome: 1124px 527px -1124px -527px 44px 44px 1176px 926px '~sprite.png' 'chrome';
@collapse-name: 'collapse';
@collapse-x: 1152px;
@collapse-y: 458px;
@collapse-offset-x: -1152px;
@collapse-offset-y: -458px;
@collapse-width: 21px;
@collapse-height: 52px;
@collapse-total-width: 1176px;
@collapse-total-height: 926px;
@collapse-image: '~sprite.png';
@collapse: 1152px 458px -1152px -458px 21px 52px 1176px 926px '~sprite.png' 'collapse';
@delete-name: 'delete';
@delete-x: 1164px;
@delete-y: 387px;
@delete-offset-x: -1164px;
@delete-offset-y: -387px;
@delete-width: 11px;
@delete-height: 13px;
@delete-total-width: 1176px;
@delete-total-height: 926px;
@delete-image: '~sprite.png';
@delete: 1164px 387px -1164px -387px 11px 13px 1176px 926px '~sprite.png' 'delete';
@drag-name: 'drag';
@drag-x: 1145px;
@drag-y: 387px;
@drag-offset-x: -1145px;
@drag-offset-y: -387px;
@drag-width: 19px;
@drag-height: 20px;
@drag-total-width: 1176px;
@drag-total-height: 926px;
@drag-image: '~sprite.png';
@drag: 1145px 387px -1145px -387px 19px 20px 1176px 926px '~sprite.png' 'drag';
@edit-name: 'edit';
@edit-x: 1138px;
@edit-y: 435px;
@edit-offset-x: -1138px;
@edit-offset-y: -435px;
@edit-width: 12px;
@edit-height: 11px;
@edit-total-width: 1176px;
@edit-total-height: 926px;
@edit-image: '~sprite.png';
@edit: 1138px 435px -1138px -435px 12px 11px 1176px 926px '~sprite.png' 'edit';
@firefox-name: 'firefox';
@firefox-x: 717px;
@firefox-y: 318px;
@firefox-offset-x: -717px;
@firefox-offset-y: -318px;
@firefox-width: 44px;
@firefox-height: 44px;
@firefox-total-width: 1176px;
@firefox-total-height: 926px;
@firefox-image: '~sprite.png';
@firefox: 717px 318px -717px -318px 44px 44px 1176px 926px '~sprite.png' 'firefox';
@ie-name: 'ie';
@ie-x: 761px;
@ie-y: 318px;
@ie-offset-x: -761px;
@ie-offset-y: -318px;
@ie-width: 44px;
@ie-height: 44px;
@ie-total-width: 1176px;
@ie-total-height: 926px;
@ie-image: '~sprite.png';
@ie: 761px 318px -761px -318px 44px 44px 1176px 926px '~sprite.png' 'ie';
@logo-name: 'logo';
@logo-x: 1080px;
@logo-y: 527px;
@logo-offset-x: -1080px;
@logo-offset-y: -527px;
@logo-width: 44px;
@logo-height: 48px;
@logo-total-width: 1176px;
@logo-total-height: 926px;
@logo-image: '~sprite.png';
@logo: 1080px 527px -1080px -527px 44px 48px 1176px 926px '~sprite.png' 'logo';
@menucollapse-name: 'menucollapse';
@menucollapse-x: 1157px;
@menucollapse-y: 416px;
@menucollapse-offset-x: -1157px;
@menucollapse-offset-y: -416px;
@menucollapse-width: 14px;
@menucollapse-height: 14px;
@menucollapse-total-width: 1176px;
@menucollapse-total-height: 926px;
@menucollapse-image: '~sprite.png';
@menucollapse: 1157px 416px -1157px -416px 14px 14px 1176px 926px '~sprite.png' 'menucollapse';
@menuopen-name: 'menuopen';
@menuopen-x: 1152px;
@menuopen-y: 510px;
@menuopen-offset-x: -1152px;
@menuopen-offset-y: -510px;
@menuopen-width: 14px;
@menuopen-height: 14px;
@menuopen-total-width: 1176px;
@menuopen-total-height: 926px;
@menuopen-image: '~sprite.png';
@menuopen: 1152px 510px -1152px -510px 14px 14px 1176px 926px '~sprite.png' 'menuopen';
@network-error-slogan-name: 'network-error-slogan';
@network-error-slogan-x: 953px;
@network-error-slogan-y: 318px;
@network-error-slogan-offset-x: -953px;
@network-error-slogan-offset-y: -318px;
@network-error-slogan-width: 214px;
@network-error-slogan-height: 69px;
@network-error-slogan-total-width: 1176px;
@network-error-slogan-total-height: 926px;
@network-error-slogan-image: '~sprite.png';
@network-error-slogan: 953px 318px -953px -318px 214px 69px 1176px 926px '~sprite.png' 'network-error-slogan';
@network-error-name: 'network-error';
@network-error-x: 0px;
@network-error-y: 608px;
@network-error-offset-x: 0px;
@network-error-offset-y: -608px;
@network-error-width: 363px;
@network-error-height: 318px;
@network-error-total-width: 1176px;
@network-error-total-height: 926px;
@network-error-image: '~sprite.png';
@network-error: 0px 608px 0px -608px 363px 318px 1176px 926px '~sprite.png' 'network-error';
@newicon-name: 'newicon';
@newicon-x: 1138px;
@newicon-y: 416px;
@newicon-offset-x: -1138px;
@newicon-offset-y: -416px;
@newicon-width: 19px;
@newicon-height: 19px;
@newicon-total-width: 1176px;
@newicon-total-height: 926px;
@newicon-image: '~sprite.png';
@newicon: 1138px 416px -1138px -416px 19px 19px 1176px 926px '~sprite.png' 'newicon';
@nodata-name: 'nodata';
@nodata-x: 953px;
@nodata-y: 387px;
@nodata-offset-x: -953px;
@nodata-offset-y: -387px;
@nodata-width: 105px;
@nodata-height: 67px;
@nodata-total-width: 1176px;
@nodata-total-height: 926px;
@nodata-image: '~sprite.png';
@nodata: 953px 387px -953px -387px 105px 67px 1176px 926px '~sprite.png' 'nodata';
@openlv3menu-name: 'openlv3menu';
@openlv3menu-x: 450px;
@openlv3menu-y: 508px;
@openlv3menu-offset-x: -450px;
@openlv3menu-offset-y: -508px;
@openlv3menu-width: 21px;
@openlv3menu-height: 52px;
@openlv3menu-total-width: 1176px;
@openlv3menu-total-height: 926px;
@openlv3menu-image: '~sprite.png';
@openlv3menu: 450px 508px -450px -508px 21px 52px 1176px 926px '~sprite.png' 'openlv3menu';
@opera-name: 'opera';
@opera-x: 704px;
@opera-y: 387px;
@opera-offset-x: -704px;
@opera-offset-y: -387px;
@opera-width: 44px;
@opera-height: 44px;
@opera-total-width: 1176px;
@opera-total-height: 926px;
@opera-image: '~sprite.png';
@opera: 704px 387px -704px -387px 44px 44px 1176px 926px '~sprite.png' 'opera';
@person-name: 'person';
@person-x: 543px;
@person-y: 465px;
@person-offset-x: -543px;
@person-offset-y: -465px;
@person-width: 40px;
@person-height: 39px;
@person-total-width: 1176px;
@person-total-height: 926px;
@person-image: '~sprite.png';
@person: 543px 465px -543px -465px 40px 39px 1176px 926px '~sprite.png' 'person';
@qr-name: 'qr';
@qr-x: 813px;
@qr-y: 318px;
@qr-offset-x: -813px;
@qr-offset-y: -318px;
@qr-width: 140px;
@qr-height: 140px;
@qr-total-width: 1176px;
@qr-total-height: 926px;
@qr-image: '~sprite.png';
@qr: 813px 318px -813px -318px 140px 140px 1176px 926px '~sprite.png' 'qr';
@refresh-name: 'refresh';
@refresh-x: 1150px;
@refresh-y: 435px;
@refresh-offset-x: -1150px;
@refresh-offset-y: -435px;
@refresh-width: 10px;
@refresh-height: 10px;
@refresh-total-width: 1176px;
@refresh-total-height: 926px;
@refresh-image: '~sprite.png';
@refresh: 1150px 435px -1150px -435px 10px 10px 1176px 926px '~sprite.png' 'refresh';
@safari-name: 'safari';
@safari-x: 748px;
@safari-y: 387px;
@safari-offset-x: -748px;
@safari-offset-y: -387px;
@safari-width: 44px;
@safari-height: 44px;
@safari-total-width: 1176px;
@safari-total-height: 926px;
@safari-image: '~sprite.png';
@safari: 748px 387px -748px -387px 44px 44px 1176px 926px '~sprite.png' 'safari';
@smalllogo-name: 'smalllogo';
@smalllogo-x: 583px;
@smalllogo-y: 465px;
@smalllogo-offset-x: -583px;
@smalllogo-offset-y: -465px;
@smalllogo-width: 30px;
@smalllogo-height: 32px;
@smalllogo-total-width: 1176px;
@smalllogo-total-height: 926px;
@smalllogo-image: '~sprite.png';
@smalllogo: 583px 465px -583px -465px 30px 32px 1176px 926px '~sprite.png' 'smalllogo';
@table-empty-name: 'table-empty';
@table-empty-x: 450px;
@table-empty-y: 434px;
@table-empty-offset-x: -450px;
@table-empty-offset-y: -434px;
@table-empty-width: 93px;
@table-empty-height: 74px;
@table-empty-total-width: 1176px;
@table-empty-total-height: 926px;
@table-empty-image: '~sprite.png';
@table-empty: 450px 434px -450px -434px 93px 74px 1176px 926px '~sprite.png' 'table-empty';
@textlogo-name: 'textlogo';
@textlogo-x: 1058px;
@textlogo-y: 416px;
@textlogo-offset-x: -1058px;
@textlogo-offset-y: -416px;
@textlogo-width: 80px;
@textlogo-height: 30px;
@textlogo-total-width: 1176px;
@textlogo-total-height: 926px;
@textlogo-image: '~sprite.png';
@textlogo: 1058px 416px -1058px -416px 80px 30px 1176px 926px '~sprite.png' 'textlogo';
@txtlogo-name: 'txtlogo';
@txtlogo-x: 1058px;
@txtlogo-y: 387px;
@txtlogo-offset-x: -1058px;
@txtlogo-offset-y: -387px;
@txtlogo-width: 87px;
@txtlogo-height: 29px;
@txtlogo-total-width: 1176px;
@txtlogo-total-height: 926px;
@txtlogo-image: '~sprite.png';
@txtlogo: 1058px 387px -1058px -387px 87px 29px 1176px 926px '~sprite.png' 'txtlogo';
@upgrade-hint-name: 'upgrade-hint';
@upgrade-hint-x: 450px;
@upgrade-hint-y: 387px;
@upgrade-hint-offset-x: -450px;
@upgrade-hint-offset-y: -387px;
@upgrade-hint-width: 254px;
@upgrade-hint-height: 47px;
@upgrade-hint-total-width: 1176px;
@upgrade-hint-total-height: 926px;
@upgrade-hint-image: '~sprite.png';
@upgrade-hint: 450px 387px -450px -387px 254px 47px 1176px 926px '~sprite.png' 'upgrade-hint';
@upgrade-now-name: 'upgrade-now';
@upgrade-now-x: 543px;
@upgrade-now-y: 434px;
@upgrade-now-offset-x: -543px;
@upgrade-now-offset-y: -434px;
@upgrade-now-width: 195px;
@upgrade-now-height: 31px;
@upgrade-now-total-width: 1176px;
@upgrade-now-total-height: 926px;
@upgrade-now-image: '~sprite.png';
@upgrade-now: 543px 434px -543px -434px 195px 31px 1176px 926px '~sprite.png' 'upgrade-now';
@upgrade-name: 'upgrade';
@upgrade-x: 0px;
@upgrade-y: 0px;
@upgrade-offset-x: 0px;
@upgrade-offset-y: 0px;
@upgrade-width: 450px;
@upgrade-height: 290px;
@upgrade-total-width: 1176px;
@upgrade-total-height: 926px;
@upgrade-image: '~sprite.png';
@upgrade: 0px 0px 0px 0px 450px 290px 1176px 926px '~sprite.png' 'upgrade';
@spritesheet-width: 1176px;
@spritesheet-height: 926px;
@spritesheet-image: '~sprite.png';
@spritesheet-sprites: @403-slogan @403 @404-slogan @404 @500-slogan @500 @add @arrowbg-open @arrowbg @biglogo @chrome @collapse @delete @drag @edit @firefox @ie @logo @menucollapse @menuopen @network-error-slogan @network-error @newicon @nodata @openlv3menu @opera @person @qr @refresh @safari @smalllogo @table-empty @textlogo @txtlogo @upgrade-hint @upgrade-now @upgrade;
@spritesheet: 1176px 926px '~sprite.png' @spritesheet-sprites;

/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.sprite-width(@sprite) {
  width: extract(@sprite, 5);
}

.sprite-height(@sprite) {
  height: extract(@sprite, 6);
}

.sprite-position(@sprite) {
  @sprite-offset-x: extract(@sprite, 3);
  @sprite-offset-y: extract(@sprite, 4);
  background-position: @sprite-offset-x @sprite-offset-y;
}

.sprite-image(@sprite) {
  @sprite-image: extract(@sprite, 9);
  background-image: e(%('url(%a)', e(@sprite-image)));
}

.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
  @sprite: extract(@sprites, @i);
  @sprite-name: e(extract(@sprite, 10));
  .@{sprite-name} {
    .sprite(@sprite);
  }
  .sprites(@sprites, @i + 1);
}