/* Does nothing? * /
@-ms-viewport {
	width: 100px;
	zoom: 100%;
}

@viewport {
	width: 10px;
	zoom: 100%;
}

@-ms-viewport {
	user-zoom: fixed;
}

@viewport {
	user-zoom: fixed;
}
/**/

html,
body {
    height: 100%;
}

body {
    cursor: default;
    margin: 0;
    background: black;
    touch-action: manipulation;
    user-select: none;
}

div {
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    text-size-adjust: none;
    /* tap-highlight-color: rgba(0, 0, 0, 0); */
}

canvas {
    touch-action: manipulation;
}

.hidden {
    visibility: hidden;
}

li {
    padding: 0;
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}
.clear {
    float: none;
    clear: both;
}
.editable {
    overflow: hidden;
    caret-color: transparent;
    cursor: text;
}
[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: gray;
    background-color: transparent;
}

/*
@font-face {
	font-family: 'DiabloFont';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
		url('myfont-webfont.woff') format('woff'), 
		url('../fonts/diablo_h.ttf')  format('truetype'),
		url('myfont-webfont.svg.svgFontName') format('svg');
}
@font-face {
	font-family: DiabloFont;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/diablo_h.ttf)  format(truetype);
}
@font-face {
	font-family: lazy_dog;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/lazy_dog.ttf)  format(truetype);
}
@font-face {
	font-family: Game_time;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/Game_time.ttf)  format(truetype);
}
@font-face {
	font-family: Ampersand;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/ampersand.ttf)  format(truetype);
}
*/

/* Fonts */

@font-face {
    font-family: "Saniretro";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Saniretro.ttf") format("truetype");
}

@font-face {
    font-family: "NewRocker";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/NewRocker-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Monoton";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Monoton-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Troika";
    font-style: normal;
    font-weight: normal;
    src: local("Troika"), url("../fonts/Troika-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "NovaFlat";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/NovaFlat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "OdibeeSans";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/OdibeeSans-Regular.ttf") format("truetype");
}

/*
@font-face {
	font-family: 'Saniretro';
	font-style: normal;
	font-weight: normal;
	src: local('DiabloFont'), url('../fonts/Saniretro.ttf') format('truetype');
}
*/

/*
@font-face {
    font-family: Diablo Light;
    src: url(../fonts/Diablo_Light/DIABLO_L.eot?) format(eot), url(../fonts/Diablo_Light/DIABLO_L.woff) format(woff),
        url(../fonts/Diablo_Light/DIABLO_L.ttf) format(truetype), url(../fonts/Diablo_Light/DIABLO_L.svg#DiabloLight) format(svg);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Diablo Heavy;
    src: url(../fonts/Diablo_Heavy/DIABLO_H.eot?) format(eot), url(../fonts/Diablo_Heavy/DIABLO_H.woff) format(woff),
        url(../fonts/Diablo_Heavy/DIABLO_H.ttf) format(truetype), url(../fonts/Diablo_Heavy/DIABLO_H.svg#DiabloHeavy) format(svg);
    font-weight: normal;
    font-style: normal;
}
*/

/* iScroll wrapper */

#wrapper {
    position: relative;
}

/* Main div */

#game {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: 0;
    width: 1024px;
    height: 1650px;
    min-height: 300px;
    overflow: hidden;
    visibility: hidden;
}

/* Top menu */
div#topMenu {
    position: relative;
    width: 1024px;
    z-index: 1;
    text-align: right;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    height: 369px;
    margin: 0px auto 0;
}
div#topLogo {
    position: absolute;
    width: 1024px;
    height: 135px;
    background-image: url(../images/UI/ui_top_logo.jpg);
}
div#UIactions {
    position: absolute;
    width: 1024px;
    height: 234px;
    top: 135px;
    background-image: url(../images/UI/ui_top.jpg);
    /*
	display: block;
	margin-left: auto;
	margin-right: auto;
	*/
}
#userinfo {
    display: inline-block;
    background: black;
    border: solid 1px;
    color: gray;
    margin: 0;
    padding: 7px 5px 0 5px;
}
#userinfo,
#signout {
    height: 26px;
    margin-top: 18px;
    font-family: OdibeeSans;
    letter-spacing: 1px;
}

/* Bottom half */

div#containerBody {
    padding-top: 0;
    background-image: url(../images/UI/uipadbg.jpg);
}

/* Top half */

div#mainBody {
    overflow: hidden;
    height: 450px;
}

/* Mute button */

div#UIMute {
    position: absolute;
    left: 728px;
    top: 161px;
    width: 60px;
    height: 60px;
    background: url(../images/UI/menu_buttons.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
div#UIMute:active {
    background-position: 0px -60px;
}

div#UIMute.mute {
    background-position: 0 -120px;
}
div#UIMute.mute:active {
    background-position: 0px -60px;
}

/* Music button */

div#UIMusic {
    position: absolute;
    left: 799px;
    top: 161px;
    width: 60px;
    height: 60px;
    background: url(../images/UI/menu_buttons.png);
    background-repeat: no-repeat;
    background-position: -60px 0px;
}
div#UIMusic:active {
    background-position: -60px -60px;
}

div#UIMusic.mute {
    background-position: -60px -120px;
}
div#UIMusic.mute:active {
    background-position: -60px -60px;
}

div#UITutorial {
    position: absolute;
    left: 869px;
    top: 161px;
    width: 60px;
    height: 40px;

    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0 0 6px black;
    color: #f5deb2;
    font-size: 60px;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;

    /*
    background: url(../images/UI/menu_buttons.png);
    background-repeat: no-repeat;
    background-position: -60px 0px;
    */
}
div#UITutorial:hover {
    color: #fff;
}

div#UITutorialImage {
    position: fixed;
    top: 0;
    left: 50%;
    height: inherit;
    width: 100%;
    transform: translate(-50%, 0);
    max-width: 1024px;
    /*background-color: #000000;*/
}

div#UISignout {
    position: absolute;
    left: 939px;
    top: 161px;
    width: 60px;
    height: 40px;

    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0 0 6px black;
    color: #f5deb2;
    font-family: OdibeeSans;
    font-size: 17px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;

    /*
    background: url(../images/UI/menu_buttons.png);
    background-repeat: no-repeat;
    background-position: -60px 0px;
    */
}
div#UISignout:hover {
    color: #fff;
}

div#UIMusic:active {
    background-position: -60px -60px;
}

/* Salvage numbers */

.UISalvageNumber {
    position: absolute;
    width: 60px;
    height: 30px;
    top: 59px;
    text-align: left;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #f5deb2;
    font-size: 20px; /*1.3em;*/
    line-height: 30px;
    letter-spacing: 1px;
}

#UISalvageNumber0 {
    left: 250px;
}

#UISalvageNumber1 {
    left: 390px;
}

#UISalvageNumber2 {
    left: 530px;
}

/* Salvage buttons */

.SalvageButton {
    position: absolute;
    padding: 0;
    width: 60px;
    height: 60px;
    border: 0;
    outline: 0;
    /*border-radius: 30px; */
    top: 483px;
    background: none;
    background: transparent;
    border-radius: 50%;
}

#UISalvage0 {
    left: 658px;
}

#UISalvage1 {
    left: 728px;
}

#UISalvage2 {
    left: 798px;
}

#UISalvage3 {
    left: 868px;
}

#UISalvage4 {
    left: 938px;
}

#UISalvage0:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#UISalvage1:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -70px 0px;
}

#UISalvage2:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -140px 0px;
}

#UISalvage3:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -210px 0px;
}

#UISalvage4:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -280px 0px;
}

#UISalvage0.active {
    background: url(../images/UI/salvage_active.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    transform-origin: 50% 50%;
    animation-duration: 1s, 1s;
    animation-name: rotating;
    animation-iteration-count: infinite;
}

#UISalvage1.active {
    background: url(../images/UI/salvage_active.png);
    background-repeat: no-repeat;
    background-position: -70px 0px;
    transform-origin: 50% 50%;
    animation-duration: 1s, 1s;
    animation-name: rotating;
    animation-iteration-count: infinite;
}

#UISalvage2.active {
    background: url(../images/UI/salvage_active.png);
    background-repeat: no-repeat;
    background-position: -140px 0px;
    transform-origin: 50% 50%;
    animation-duration: 1s, 1s;
    animation-name: rotating;
    animation-iteration-count: infinite;
}

#UISalvage3.active {
    background: url(../images/UI/salvage_active.png);
    background-repeat: no-repeat;
    background-position: -210px 0px;
    transform-origin: 50% 50%;
    animation-duration: 1s, 1s;
    animation-name: rotating;
    animation-iteration-count: infinite;
}

#UISalvage4.active {
    background: url(../images/UI/salvage_active.png);
    background-repeat: no-repeat;
    background-position: -280px 0px;
    transform-origin: 50% 50%;
    animation-duration: 1s, 1s;
    animation-name: rotating;
    animation-iteration-count: infinite;
}

#UISalvage0.active:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#UISalvage1.active:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -70px 0px;
}

#UISalvage2.active:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -140px 0px;
}

#UISalvage3.active:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -210px 0px;
}

#UISalvage4.active:active {
    background: url(../images/UI/salvage_down.png);
    background-repeat: no-repeat;
    background-position: -280px 0px;
}

/* Reset attributes button */

div#UIResetAttrib {
    position: absolute;
    left: 358px;
    top: 744px;
    width: 60px;
    height: 60px;
}

/* Top bar */
div#UITopBar1 {
    position: relative;
    top: 0;
    width: 100%;
    height: 74px;
    margin-left: auto;
    margin-right: auto;
    /*background: url(../images/UI/uitopbar_01.png);*/
}

/* Store level button */
div#UIStoreLevel {
    position: absolute;
    left: 18px;
    top: 157px;
    background-position: -140px 0;
}
div#UIStoreLevel:active {
    background-position: -140px -74px;
}

/* Previous difficulty button */
div#UIPreviousDiff {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 376px;
    top: 80px;
    background-position: -240px 0;
    background-image: url(../images/UI/menu_buttons.png);
}
div#UIPreviousDiff:active {
    background-position: -240px -60px;
}

/* Next difficulty button */
div#UINextDiff {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 587px;
    top: 80px;
    background-position: -300px 0;
    background-image: url(../images/UI/menu_buttons.png);
}
div#UINextDiff:active {
    background-position: -300px -60px;
}
/* Previous level button */
div#UIPreviousLevel {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 346px;
    top: 161px;
    background-position: -240px 0;
    background-image: url(../images/UI/menu_buttons.png);
}
div#UIPreviousLevel:active {
    background-position: -240px -60px;
}

/* Next level button */
div#UINextLevel {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 617px;
    top: 161px;
    background-position: -300px 0;
    background-image: url(../images/UI/menu_buttons.png);
}
div#UINextLevel:active {
    background-position: -300px -60px;
}
/*
.Justplay div#UIPreviousLevel {
	left: 140px;
}
.Justplay div#UINextLevel {
	right: 20px;
}
*/

/* Difficulty level */
div#UIDungeonDiffText {
    position: absolute;
    width: 230px;
    height: 74px;
    top: 74px;
    left: 395px;
    text-align: center;
    font-family: OdibeeSans;
    font-size: 20px; /*1.3em;*/
    text-shadow: 0 0 7px white;
    color: white;
    line-height: 74px;
    letter-spacing: 1px;
}

/* Dungeon level */
div#UIDungeonLevelText {
    position: absolute;
    width: 230px;
    height: 74px;
    top: 158px;
    left: 395px;
    text-align: center;
    font-family: OdibeeSans;
    font-size: 20px; /*1.3em;*/
    text-shadow: 0 0 7px white;
    color: white;
    line-height: 74px;
    letter-spacing: 1px;
}

/* Vendor level */
div#UIVendorText {
    position: absolute;
    width: 100%;
    height: 74px;
    top: 0;
    text-align: center;
    font-family: OdibeeSans;
    font-size: 20px; /*1.3em;*/
    text-shadow: 0 0 7px white;
    color: white;
    line-height: 70px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 1px;
}

/* Quest log */
div#UIQuestlog {
    position: absolute;
    top: 20px;
    right: 150px;
    width: 120px;
    height: 40px;
    text-align: left;
    font-family: OdibeeSans;
    font-size: 16px; /*1em;*/
    text-shadow: 0 0 7px white;
    color: white;
    line-height: 1;
    margin-left: auto;
    margin-right: 5px;
    letter-spacing: 1px;
}
/* Quest log */
div#UIQuestlogBossButton {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 140px;
    height: 74px;
    margin-left: auto;
    margin-right: 5px;
    z-index: 10;
    visibility: hidden;
    /*background-image: url(../images/UI/spell_icons.png);*/
    background-position: -700px 0;
}
div#UIQuestlogBossButton:active {
    background-position: -700px -74px;
}

/* Debug button */

div#UIDebug {
    position: absolute;
    left: 967px;
    top: 6px;
    width: 50px;
    height: 50px;
}

/* FPS */

div#UIFPS {
    position: absolute;
    left: 480px;
    top: 62px;
    width: 70px;
    height: 25px;
    text-align: center;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 20px; /*1.3em;*/
    letter-spacing: 1px;
}

/* Gold */

div#UIGold {
    position: absolute;
    right: 250px;
    top: 59px;
    width: 150px;
    height: 30px;
    text-align: right;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: gold;
    font-size: 20px; /*1.3em;*/
    line-height: 30px;
    letter-spacing: 1px;
}

/* Skills */
div#UISkill1,
div#UISkill2,
div#UISkill3,
div#UISkill4 {
    position: absolute;
    top: -34px;
    width: 84px;
    height: 84px;
    z-index: 2;

    background-image: url(../images/UI/spell_icons.png), url(../images/UI/spell_icons.png), none, url(../images/UI/spell_icons.png);
    background-blend-mode: normal, normal, saturation;
    border-radius: 50%;

    text-align: center;
    font-family: Troika;
    font-size: 40px; /*2.5em;*/
    text-shadow: 0px 0px 4px black, 0px 0px 4px black;
    color: white;
    line-height: 84px;
    letter-spacing: 1px;

    transform-origin: 50% 50%, 50% 50%;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}
div#UISkill1:first-letter,
div#UISkill2:first-letter,
div#UISkill3:first-letter,
div#UISkill4:first-letter {
    font-size: 50%;
}
div#UISkill1Timer,
div#UISkill2Timer,
div#UISkill3Timer,
div#UISkill4Timer {
    position: absolute;
    top: -62px;
    width: 84px;
    height: 30px;

    text-align: center;
    font-family: Troika;
    font-size: 24px; /*1.5em;*/
    text-shadow: 0px 0px 4px black, 0px 0px 4px black;
    color: white;
    line-height: 100%;
    letter-spacing: 1px;
}

div#UISkill1 {
    left: 18px;
    background-position: 0 0, 0 -84px, 0 0, 0 -168px;

    /*background-clip: content-box, padding-box;*/
    /*padding-top: 52px;*/
    /*mask-image: url("../images/UI/spell_icons.png");*/

    /*animation-timing-function: cubic-bezier(0.1,2,0.43,1);*/
    /*animation-name: skillUse1, skillUse2;*/
}
div#UISkill1Timer {
    left: 18px;
}

div#UISkill2 {
    left: 106px;
    background-position: -84px 0, -84px -84px, 0 0, -84px -168px;

    /*mask-image: url("../images/UI/spell_icons.png");*/

    /*animation-timing-function: cubic-bezier(0.1,2,0.43,1);*/
    /*animation-name: skillUse1, skillUse2;*/
}
div#UISkill2Timer {
    left: 106px;
}

div#UISkill3 {
    right: 106px;
    background-position: -168px 0, -168px -84px, 0 0, -168px -168px;
}
div#UISkill3Timer {
    right: 106px;
}

div#UISkill4 {
    right: 18px;
    background-position: -252px 0, -252px -84px, 0 0, -252px -168px;
}
div#UISkill4Timer {
    right: 18px;
}

/* Overlay, click events */

div#mainBodyOverlay {
    /* position: relative !important; */
    /* margin-top: -450px; */
    width: 1024px;
    height: 450px;
    background-image: url(../images/UI/uipadframe.png);
}

/* Equipment area */

div#UIEquipped {
    position: relative;
    width: 350px;
    height: 350px;
    top: 110px;
    left: 10px;
    float: left;
    padding: 10px;
    /*background-image: url(../images/UI/uipadinvbg.png);*/
}

/* Inventory area */

div#UIInventory {
    position: relative;
    width: 560px;
    height: 350px;
    top: 110px;
    right: 11px;
    float: right;
    padding: 10px;
    padding-left: 50px;
    /*background-image: url(../images/UI/uipadinvbg2.png);*/
}

/* All stats */

div.Stats {
    position: relative;
    font-family: OdibeeSans;
    float: left;
    letter-spacing: 1px;
}

div.Stats ul {
    float: left;
    display: block;
}

div.Stats li {
    float: left;
    display: block;
    text-shadow: 0 0 6px black;
    color: #f5deb2;
}

/* Attributes */

div#UIAttributes {
    top: 130px;
    padding-top: 65px;
    padding-left: 72px;
}

/* str,int,dex... */

div#UIAttributes ul {
    float: left;
    width: 120px;
    padding-left: 5px;
}

/* all li's */

div#UIAttributes li {
    float: left;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    text-shadow: 0 0 6px black;
    color: #f5deb2;
    font-size: 20px; /*1.3em;*/
    line-height: 25px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* plus button area */

div#UIAttributes li div {
    margin-left: 32px;
    margin-top: 5px;
}

/* total skill points */

div#UIAttributes ul li:nth-child(3) {
    margin-top: 0px;
    line-height: 17px;
}

/* used skill points */

div#UIAttributes ul li:nth-child(4) {
    margin-top: 1px;
    font-size: 13px; /*0.8em;*/
    line-height: 14px;
}

/* Attribute points available */

div#UIAttributes ul:nth-child(8) {
    width: 100%;
    padding-left: 320px;
    padding-top: 19px;
}

div#UIAttributes ul:nth-child(8) li {
    width: auto;
    padding-left: 5px;
}

/* Stats */

div#UIStats {
    top: 230px;
    padding-left: 0px;
}

div#UIStats ul {
    width: 243px;
    font-size: 20px;
    padding-right: 45px;
    padding-left: 34px;
}

/* Titles, Offence / Defence / Misc */

div#UIStats ul li:nth-child(1) {
    width: 100%;
    height: 47px;
    text-align: center;
    padding-left: 34px;
}

/* deeper li's */

div#UIStats ul li ul li:nth-child(1) {
    width: auto;
    height: 26px;
    text-align: left;
    padding-left: 0px;
}

div#UIStats ul li ul li:nth-child(2) {
    float: right;
}

/* Stats, OLD * /
div.Stats {
	position:relative;
	top: 140px;
	padding: 0px;
}
div.Stats li {
	display:block;
	float:left;
	margin-top: 2px;
	margin-bottom: 2px;
	text-shadow: 0 0 6px black;
	color: #d3d3d3;
	font-size: 1.3em;
	line-height: 25px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.Stats li:nth-child(1) {
	width:168px;
	padding-left:1px;
}
div.Stats#UIStats ul:nth-child(odd) li:nth-child(2){
	padding-right:20px;
}
div.Stats li:nth-child(2) {
	width:150px;
	text-align: right;
	padding-right:1px;
}

/* Attributes area * /
div#UIAttributes {
	font-family: OdibeeSans;
	float:left;
}

/* Attributes area OLD * /
div#UIAttributes {
	font-family: Diablo Heavy;
	width: 320px;
	left: 10px;
	float:left;
}
div.Stats#UIAttributes li:nth-child(1) {
	width:180px;
	line-height: 50px;
}
div.Stats#UIAttributes li:nth-child(2) {
	width:74px;
	text-align: right;
	padding-right:10px;
	line-height: 16px;
	font-size: 1.0em;
}
div.Stats#UIAttributes li:nth-child(3) {
}
div.Stats#UIAttributes ul:nth-child(1) li:nth-child(2) {
	width:1px;
	text-align: right;
	padding-right:10px;
	line-height: 16px;
	font-size: 1.0em;
}
div.Stats#UIAttributes ul:nth-child(1) li:nth-child(3) {
	width: 57px;
	float: right;
	text-align: center;
}

/* Stats area, OLD * /
div#UIStats {
	font-family: OdibeeSans;
	padding-top:15px;
	width: 670px;
	right: 0px;
	float: right;
}
div#UIStats li {
	margin-top:1px;
	margin-bottom:1px;
	height:25px;
}
/* Plus button */

div.Stats ul .plus {
    display: block;
    float: left;
    opacity: 1;
    padding: 0px;
    width: 56px;
    height: 56px;
    background-image: url(../images/UI/uiattributebuttons.png);
    background-position: 0 0;
}

div.Stats ul .plus.Available {
    background-image: none;
}

div.Stats ul .plus.Available:active {
    background-image: url(../images/UI/uiattributebuttons.png);
    background-position: 0 -56px;
}

/* Item slots */

div.UIItemSlotBg {
    width: 70px;
    height: 70px;
    background: url(../images/UI/icons.png) 0 0, url(../images/UI/icons.png) 0 0, url(../images/UI/icons.png) 0 0;
    float: left;
    transform-origin: 50% 50%;
    animation-duration: 0.2s, 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

div.UIItemSlotBg.Selected {
    transform: scale(1.3);
    position: relative;
    /*
	animation-name: newItem1;
	transform-origin: 50% 100%;
	animation-duration: 1.0s, 1.0s;
	animation-name: damage1;
	animation-iteration-count: infinite;
	*/
}

/* Level area */

div#UILevelArea {
    position: absolute;
    width: 100%;
    height: 50px;
    left: auto;
}

/* XP bar area */

div#UIXPArea {
    position: relative;
    height: 10px;
    top: 37px;
    margin-left: auto;
    margin-right: auto;
}

/* XP bar */

div#UIXPBar {
    position: relative;
    width: 0;
    height: 10px;
    left: 0;
    background: url(../images/UI/uipadxpbar.png);
}

/* Level */

div#UILevel {
    width: 200px;
    height: 18px;
    top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    text-align: center;
    font-family: OdibeeSans;
    font-size: 18px; /*1.1em;*/
    text-shadow: 0 0 7px white;
    color: white;
    line-height: 100%;
    letter-spacing: 1px;
}

/* Tooltips */

div#UITooltipArea {
    position: absolute;
    height: 500px;
    width: 1024px;
    margin-top: -560px;
    visibility: hidden;
    animation-duration: 0.2s;
    transform-origin: bottom;
    pointer-events: none;
    z-index: 20;
}
div#UITooltipBuy,
div#UITooltipSell {
    position: absolute;
    left: 10px;
    bottom: 20px;
    background-repeat: no-repeat;
    background-position: -140px 0px;
}
div#UITooltipBuy:active {
    background-position: -140px -74px;
}
div#UITooltipSell:active {
    background-repeat: no-repeat;
    background-position: 0 -94px;
}

div#UITooltipEquip,
div#UITooltipBuy,
div#UITooltipSell {
    display: none;
}
.Purchase div#UITooltipBuy,
.BuyBack div#UITooltipBuy,
.Sell div#UITooltipSell,
.Sell div#UITooltipEquip,
.Default div#UITooltipEquip {
    display: block;
}
.Purchase div#UITooltipDelete,
.BuyBack div#UITooltipDelete,
.Default div#UITooltipSell {
    display: none;
}
div#UITooltipSell {
    position: absolute;
    left: 792px;
    top: 290px;
    width: 76px;
    height: 94px;
    background: url("../images/UI/uitooltip_sidetabsell.png");
    pointer-events: auto;
}

/* Tooltip animations */

@keyframes tooltipIn {
    0% {
        /*transform: translate(0px, -335px);*/
        /*transform: scale(1, 0);*/
        opacity: 0;
        visibility: hidden;
        /*animation-timing-function: cubic-bezier(.33,1.5,.67,1);*/
        animation-timing-function: ease-out;
    }
    100% {
        /*transform: translate(0px, 0px);*/
        /*transform: scale(1, 1);*/
        opacity: 1;
        visibility: visible;
        /*animation-timing-function: cubic-bezier(.33,1.5,.67,1);*/
        animation-timing-function: ease-in;
    }
}

@keyframes tooltipOut {
    0% {
        /*transform: translate(0px, 335px);*/
        /*transform: scale(1, 1);*/
        opacity: 1;
        visibility: visible;
        /*animation-timing-function: cubic-bezier(.33,0,.67,-0.5);*/
        animation-timing-function: ease-in;
    }
    100% {
        /*transform: translate(0px, 0px);*/
        /*transform: scale(1, 0);*/
        opacity: 0;
        visibility: hidden;
        /*animation-timing-function: cubic-bezier(.33,0,.67,-0.5);*/
        animation-timing-function: ease-out;
    }
}

div.UITooltipBg {
    position: absolute;
    display: inline-block;
    top: 27px;
    height: 80%;
    width: 100%;
    background: url(../images/UI/tooltip_mid.png?cb=20160614-1);
}

div.UITooltipTop {
    position: absolute;
    display: inline-block;
    top: 0;
    width: 100%;
    height: 130px;
    background: url(../images/UI/tooltip_top.png?cb=20160614-1);
}

div.UITooltipBottom {
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: url(../images/UI/tooltip_bottom.png?cb=20160614-1);
}

div.UITooltipContent {
    position: relative;
    display: inline-block;
    top: 0;
    width: 240px;
    padding-top: 10px;
    padding-bottom: 67px;
    padding-left: 25px;
    margin-top: 15px;
    margin-bottom: 23px;
}

/* Selected item tooltip */

div#UITooltipSelectedArea {
    position: absolute;
    display: inline-block;
    right: 224px;
    bottom: -45px;
    width: 290px;
}

/* Compare item tooltip */

div#UITooltipCompareArea {
    position: absolute;
    display: inline-block;
    left: 224px;
    bottom: -45px;
    width: 290px;
}

div#UITooltipSelectedContent ul li:nth-child(even),
div#UITooltipCompareContent ul li:nth-child(even) {
    display: block;
    width: 10%;
    float: left;
    text-align: left;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 16px; /*1em;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
}

div#UITooltipSelectedContent ul li:nth-child(odd),
div#UITooltipCompareContent ul li:nth-child(odd) {
    display: block;
    width: 90%;
    float: right;
    text-align: right;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 16px; /*1em;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* Selected / Equipped */

div#UITooltipSelectedContent ul li:nth-child(1),
div#UITooltipCompareContent ul li:nth-child(1) {
    float: right;
    width: 100%;
    padding-bottom: 2px;
    text-align: center;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 16px; /*1em;*/
    letter-spacing: 1px;
}

/* Item name */

div#UITooltipSelectedContent ul li:nth-child(2),
div#UITooltipCompareContent ul li:nth-child(2) {
    top: 0;
    width: 100%;
    text-align: center;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 24px; /*1.5em;*/
    white-space: normal;
    letter-spacing: 1px;
}

/* Rarity + type */

div#UITooltipSelectedContent ul li:nth-child(3),
div#UITooltipCompareContent ul li:nth-child(3) {
    float: right;
    width: 100%;
    text-align: right;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 16px; /*1em;*/
    letter-spacing: 1px;
}

/* image */

div#UITooltipSelectedContent ul li:nth-child(4) {
    height: 70px;
    width: 100%;
    background: url(../images/UI/uicompareicons.png);
    background-repeat: no-repeat;
    line-height: 97px;
}

/* Compare numbers */

div#UITooltipSelectedContent ul li:nth-child(4) li {
    float: left;
    width: 25%;
    background: none;
    text-align: center;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 14px; /*0.9em;*/
    letter-spacing: 1px;
}

/* Image filler */

div#UITooltipSelectedContent ul li:nth-child(5) {
    width: 0%;
}

/* Tooltip level required formatting */

li#ttlevelreq,
li#ttlevelreq2,
li#ttclevelreq,
li#ttclevelreq2 {
    padding-top: 10px !important;
}

li#ttlevelreq,
li#ttclevelreq {
    font-size: 16px /*1em*/ !important;
    width: 60% !important;
    text-align: right !important;
}

li#ttlevelreq2,
li#ttclevelreq2 {
    font-size: 16px /*1em*/ !important;
    width: 38% !important;
    text-align: left !important;
}

/* UI Buttons */

div.UIButton {
    display: block;
    width: 140px;
    height: 74px;
    line-height: 74px;
    background: url(../images/UI/uibuttons.png);
    text-align: center;
    text-shadow: 0 0 6px black;
    font-family: OdibeeSans;
    font-size: 20px; /*1.2em;*/
    color: #f5deb2;
    pointer-events: auto;
    letter-spacing: 1px;
}

/* Tooltip delete button */

div#UITooltipDelete {
    position: absolute;
    left: 792px;
    top: 370px;
    width: 76px;
    height: 94px;
    background: url(../images/UI/uitooltip_sidetabsalvage.png);
    pointer-events: auto;
}

div#UITooltipDelete:active {
    background-repeat: no-repeat;
    background-position: 0 -94px;
}

/* Tooltip Equip button */

div#UITooltipEquip {
    position: absolute;
    left: 10px;
    bottom: 20px;
    background-repeat: no-repeat;
    background-position: -140px 0px;
}

div#UITooltipEquip:active {
    background-position: -140px -74px;
}

/* Tooltip Cancel button */

div#UITooltipCancel {
    position: absolute;
    right: 10px;
    bottom: 20px;
    background-repeat: no-repeat;
    background-position: -280px 0px;
    opacity: 1;
}

div#UITooltipCancel:active {
    background-position: -280px -74px;
}

/* Tooltip Next button */

div#UITooltipNext {
    position: absolute;
    right: 10px;
    bottom: 20px;
    opacity: 0.2;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

div#UITooltipNext:active {
    background-position: 0px -74px;
}

/* Tooltip Previous button */

div#UITooltipPrevious {
    position: absolute;
    left: 10px;
    bottom: 20px;
    opacity: 0.2;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

div#UITooltipPrevious:active {
    background-position: 0px -74px;
}

/* Tooltip highlight */

li.ttBetter {
    color: green !important;
}

li.ttWorse {
    color: red !important;
}

/* Start game screen */

div#UIStartGame {
    position: relative;
    height: 450px;
    width: 1024px;
    margin-top: -1649px;
    background: black;
    opacity: 0.8;
    text-align: center;
    z-index: 50;
}

span#UIStartGame {
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    color: white;
    font-size: 50px; /*3.1em;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 375px; /*411px;*/
    letter-spacing: 1px;
}

/* Dialog */

div.UIDialog {
    position: absolute;
    display: inline-block;
    top: 350px;
    left: 102px;
    width: 80%;
    /*height: 300px;*/
    margin-left: auto;
    margin-right: auto;
    /*background: black;*/
    /*background: rgba(0, 0, 0, 0.8);*/
}

div#UIDialog1Area {
    position: fixed;
    /*height: 300px;*/
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    animation-duration: 0.4s;
    visibility: hidden;
    z-index: 100;
}

@keyframes dialogIn {
    0% {
        /* 265 + 70 */
        transform: translate(0px, -1335px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes dialogOut {
    0% {
        visibility: visible;
        transform: translate(0px, 335px);
    }
    100% {
        visibility: hidden;
        transform: translate(0px, 0px);
    }
}

div#UIDialog1Bg {
    position: absolute;
    display: inline-block;
    top: 22px;
    height: 84%;
    width: 100%;
    background: url(../images/UI/ui_dialog_mid.png);
}

div#UIDialog1Top {
    position: absolute;
    display: inline-block;
    top: 0;
    width: 100%;
    height: 64px;
    background: url(../images/UI/ui_dialog_top.png);
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    text-align: center;
    color: white;
    font-size: 50px; /*3.1em;*/
    display: inline-block;
    line-height: 90px;
    letter-spacing: 1px;
}

div#UIDialog1Bottom {
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 100%;
    height: 54px;
    background: url(../images/UI/ui_dialog_bottom.png);
}

div#UIDialog1Content {
    position: relative;
    display: inline-block;
    top: 60px;
    left: 10%;
    width: 80%;
    padding-top: 10px;
    padding-bottom: 67px;
    padding-right: 25px;
    margin-top: 15px;
    margin-bottom: 80px;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    text-align: center;
    color: white;
    font-size: 24px; /*1.5em;*/
    display: inline-block;
    line-height: 30px;
    letter-spacing: 1px;
}

input#UIDialog1Input {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    left: 0;
    right: 0;
    bottom: 88px;
    background-repeat: no-repeat;
    background-position: -140px 0;
    opacity: 1;
}

div#UIDialog1Button1 {
    position: absolute;
    left: 250px;
    bottom: 10px;
    background-repeat: no-repeat;
    background-position: -140px 0;
    opacity: 1;
}

div#UIDialog1Button1:active {
    background-position: -140px -74px;
}

div#UIDialog1Button2 {
    position: absolute;
    right: 250px;
    bottom: 10px;
    background-repeat: no-repeat;
    background-position: -280px 0;
    opacity: 1;
}

div#UIDialog1Button2:active {
    background-position: -280px -74px;
}

div#UIDialog1Button3 {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 10px;
    background-repeat: no-repeat;
    background-position: -140px 0;
    opacity: 1;
}

div#UIDialog1Button3:active {
    background-position: -140px -74px;
}

div#UIDialog1Button4 {
    position: absolute;
    right: -90px;
    /*bottom: 10px;*/
    top: 320px;
    background-repeat: no-repeat;
    background-position: -140px 0;
    opacity: 1;
}

div#UIDialog1Button4:active {
    background-position: -140px -74px;
}

div#UIDialog1Button5 {
    position: absolute;
    right: -90px;
    /*bottom: 10px;*/
    top: -60px;
    background-repeat: no-repeat;
    background-position: -280px 0;
    opacity: 1;
}

div#UIDialog1Button5:active {
    background-position: -280px -74px;
}

/* Chat bubbles */

div.UIChat {
    position: absolute;
    width: 290px;
    height: 210px;
    visibility: hidden;
}

div#UIChat1Area {
    left: 200px;
    bottom: 290px;
    height: auto;

    animation-duration: 0.4s, 0.4s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
div#UIChat1AreaTriangle {
    position: absolute;
    left: 200px;
    bottom: 290px;
    width: 44px;
    height: 44px;
    visibility: hidden;

    animation-duration: 0.8s, 0.8s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes triangle1 {
    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    50% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    100% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
}
@keyframes triangle2 {
    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    50% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    100% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
}

div#UIChat1Top {
    background: url(../images/UI/speech_bubble/bubble_top.png);
    height: 22px;
}
div#UIChat1Mid {
    background: url(../images/UI/speech_bubble/bubble_mid.png);
    padding: 0 20px;
    text-align: left;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 20px;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    letter-spacing: 1px;

    animation-duration: 0.4s, 0.4s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-name: easing_size;
}

@keyframes easing_size {
    0% {
        height: 0%;
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    100% {
        height: 100%;
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
}

div#UIChat1Bottom {
    background: url(../images/UI/speech_bubble/bubble_bottom.png);
    height: 25px;
}

/* Main Menu */

div#mainMenu {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100px;
    /*background: black;*/
    opacity: 0.8;
    text-align: center;
    /*visibility:hidden;*/
}

div#mainMenuPadder {
    width: 100%;
    height: 140px;
}

span.menuButton {
    width: 300px;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    color: white;
    font-size: 80px; /*5.1em;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 90px;
    cursor: pointer;
    letter-spacing: 1px;
}
span.menuButton:hover {
    width: 300px;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    color: gray;
    font-size: 80px; /*5.1em;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 90px;
    letter-spacing: 1px;
}

/* Loading screen */

div#UIloadingScreen {
    position: absolute;
    height: 500px;
    width: 100%;
    top: 0;
    /*background: black;*/
    opacity: 0.8;
    text-align: center;
    visibility: hidden;
    overflow: hidden;
}

div#UIloadingPadder {
    width: 100%;
    height: 140px;
    margin-top: 68px;
}

span#UIloadingTitle {
    width: 100%;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    color: white;
    font-size: 80px; /*5.1em;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 125px;
    letter-spacing: 1px;
}

span#UIloadingText,
span#UIloadingText2,
span#UIloadingText3 {
    width: 100%;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px white;
    color: white;
    font-size: 20px; /*1.3em;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    letter-spacing: 1px;
}

/* DEBUG */

div.debugLoc {
    border: red solid 1px;
}

div#debug {
    position: absolute;
    top: 2290px;
    width: 100%;
    left: 0;
}

div#debug1 {
    position: absolute;
    position: relative;
    top: -780px;
    top: 0;
    left: 1266px;
    left: 0;
    width: 210px;
}

div#debug2 {
    position: absolute;
    position: relative;
    top: -780px;
    top: 0;
    left: 0;
    width: 210px;
    visibility: hidden;
}

div#debug3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 70px;
}

div#debug input {
    width: 70px;
    height: 40px;
}

/* Desktop version */
body.noGame,
body.loading,
body.characterSelect,
body.characterCreator {
    background: url(../images/UI/ui_bg.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

@media all and (min-width: 1025px) {
    body {
        background: url(../images/UI/bg.jpg?cb=123123);
        background-position: center top;
    }
}

@media all and (min-width: 1180px) {
    div#debug {
        position: fixed;
        left: 0;
        top: 0;
        width: 70px;
    }
}

/*----------------------------------------------
 * JASSU
 *----------------------------------------------
 */

/* Damage numbers */

div.UIDamage {
    position: absolute;
    width: 200px;
    height: 100px;
    left: 400px;
    top: -300px;
    font-family: Troika;
    /* font-family: Ampersand; */
    /* font-family: lazy_dog; */
    font-size: 0px;
    color: #fff;
    /* font-weight: bold; */
    line-height: 100px;
    text-align: center;
    text-shadow: 0px 2px 0px black;
    /* 0px 2px 2px black,
				  0px 4px 20px white; */
    transform-origin: 50% 100%;
    animation-name: damage2;
    animation-duration: 1s, 1s;
}

@keyframes damage1 {
    0% {
        color: #fff;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, 40px);
        animation-timing-function: ease-out;
    }
    5% {
        color: #fff;
        font-size: 20px;
        transform: rotate(10deg) translate(-0px, 20px);
    }
    7% {
        color: #fff;
        font-size: 60px;
        transform: rotate(15deg) translate(-5px, 0px);
    }
    13% {
        color: #fff;
        font-size: 80px;
        transform: rotate(-10deg) translate(5px, -2px);
    }
    20% {
        color: #fff;
        font-size: 60px;
        transform: rotate(8deg) translate(0px, -20px);
        animation-timing-function: ease-in;
    }
    40% {
        color: #fff;
        font-size: 50px;
        transform: rotate(0deg) translate(0px, -40px);
        animation-timing-function: linear;
    }
    100% {
        color: #fff;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, -220px);
        animation-timing-function: linear;
    }
}

@keyframes damage2 {
    0% {
        color: #fff;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, 40px);
        animation-timing-function: ease-out;
    }
    5% {
        color: #fff;
        font-size: 20px;
        transform: rotate(10deg) translate(-0px, 20px);
    }
    7% {
        color: #fff;
        font-size: 60px;
        transform: rotate(15deg) translate(-5px, 0px);
    }
    13% {
        color: #fff;
        font-size: 80px;
        transform: rotate(-10deg) translate(5px, -2px);
    }
    20% {
        color: #fff;
        font-size: 60px;
        transform: rotate(8deg) translate(0px, -20px);
        animation-timing-function: ease-in;
    }
    40% {
        color: #fff;
        font-size: 50px;
        transform: rotate(0deg) translate(0px, -40px);
        animation-timing-function: linear;
    }
    100% {
        color: #fff;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, -220px);
        animation-timing-function: linear;
    }
}

/* Crits */

div.UIDamageCrit {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 200px;
    top: 0px;
    font-size: 0px;
    color: #ff0000;
    font-weight: bold;
    line-height: 100px;
    text-align: center;
    text-shadow: 0px 0px 5px #440000, 0px -2px 4px #f64, 0px 4px 20px #ff0000, 0px 4px 40px #000000;
    transform-origin: 50% 100%;
    animation-name: damageCrit2;
    animation-duration: 1.4s, 1.4s;
}

@keyframes damageCrit1 {
    0% {
        color: #ff0000;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, 0px);
        animation-timing-function: ease-out;
    }
    5% {
        color: #ff0000;
        font-size: 60px;
        transform: rotate(20deg) translate(-10px, -10px);
    }
    7% {
        color: #ff0000;
        font-size: 80px;
        transform: rotate(10deg) translate(-30px, -20px);
    }
    13% {
        color: #ff0000;
        font-size: 100px;
        transform: rotate(5deg) translate(20px, -10px);
    }
    20% {
        color: #ff0000;
        font-size: 80px;
        transform: rotate(-5deg) translate(0px, 0px);
    }
    40% {
        color: #ff0000;
        font-size: 50px;
        transform: rotate(0deg) translate(0px, -40px);
        animation-timing-function: ease-in;
    }
    100% {
        color: #ff0000;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, -200px);
        animation-timing-function: linear;
    }
}

@keyframes damageCrit2 {
    0% {
        color: #ff0000;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, 0px);
        animation-timing-function: ease-out;
    }
    5% {
        color: #ff0000;
        font-size: 60px;
        transform: rotate(20deg) translate(-10px, -10px);
    }
    7% {
        color: #ff0000;
        font-size: 80px;
        transform: rotate(10deg) translate(-30px, -20px);
    }
    13% {
        color: #ff0000;
        font-size: 100px;
        transform: rotate(5deg) translate(20px, -10px);
    }
    20% {
        color: #ff0000;
        font-size: 80px;
        transform: rotate(-5deg) translate(0px, 0px);
    }
    40% {
        color: #ff0000;
        font-size: 50px;
        transform: rotate(0deg) translate(0px, -40px);
        animation-timing-function: ease-in;
    }
    100% {
        color: #ff0000;
        font-size: 0px;
        transform: rotate(0deg) translate(0px, -200px);
        animation-timing-function: linear;
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }
}

@keyframes newItem1 {
    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    100% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
}

@keyframes newItem2 {
    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
    100% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.2, 2, 0.2, 1);
    }
}

@keyframes skillUse1 {
    0% {
        transform: rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
    50% {
        transform: rotate(-45deg) scale(1.3);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
    100% {
        transform: rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
}

@keyframes skillUse2 {
    0% {
        transform: rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
    50% {
        transform: rotate(-45deg) scale(1.3);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
    100% {
        transform: rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.1, 2, 0.43, 1);
    }
}
/* JASSU END */

/* SOME */
.abcRioButton {
    /*width: 300px !important;*/
    border-radius: 4px !important;
}
.abcRioButton,
.abcRioButton:hover,
.abcRioButton:active {
    box-shadow: none !important;
}
.abcRioButtonIcon {
    padding: 3px !important;
    margin: 2px !important;
}
.g-signin2 {
    margin-top: 20px;
}
.abcRioButtonContents {
    font-family: Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.25px !important;
    font-size: 16px !important;
    margin-right: 12px !important;
}
.signout {
    font-family: Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.25px !important;
    font-size: 16px !important;
    background: black;
    padding: 7px 5px 0;
    display: inline-block;
    border: solid 1px;
    text-decoration: none;
    color: gray;
    position: relative;
    z-index: 9;
}

/*** Advertisement styles ***/
advertisement {
    display: flex;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 150px; /* Google recommended borders: 150px around a game. */
    font-family: OdibeeSans;
    letter-spacing: 1px;
}
advertisement div {
    color: white;
}
advertisement.popup {
    position: fixed; /* Add follows when scrolling */
    height: 100vh;
    width: 100%;
    padding: 25px;
    z-index: 25;
}
advertisement.top,
advertisement.bottom {
    height: 90px;
    width: 1024px;
    margin: 0px auto;
    padding: 0px;
}
advertisement.left,
advertisement.right {
    position: fixed; /* Add follows when scrolling */
    width: -webkit-calc(50% - 512px) !important;
    width: -moz-calc(50% - 512px) !important;
    width: calc(50% - 512px) !important;
    height: 100vh;
    margin-top: -90px;
    margin-bottom: -90px;
    padding-top: 0px;
    padding-bottom: 0px;
}
advertisement.left {
    padding-left: 0px;
    left: 0;
}
advertisement.right {
    padding-right: 0px;
    right: 0;
}
advertisement.overlay {
    margin: 0 auto -450px;
    padding: 0;
    z-index: 10;
    height: 450px;
    width: 1024px;
}
advertisement.popup,
advertisement.overlay {
    display: none;
}
@media screen and (max-width: 1575px) {
    advertisement.right, /* No left and right adspots for mobile */
	advertisement.left {
        display: none;
    }
}
#top-advertisement,
#bottom-advertisement {
    width: 728px;
    height: 90px;
}
#right-advertisement,
#left-advertisement {
    width: 160px;
    height: 600px;
    display: block;
}
div#mwrapper {
    display: flex;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-family: OdibeeSans;
    font-size: 19px;
    letter-spacing: 1px;
    text-shadow: 0 0 3px black;

    height: 90px;
    width: 728px;
    color: red;
    padding: 10px;
    margin: 0px auto;
}

@media screen and (max-width: 750px) {
    #top-advertisement,
    #bottom-advertisement,
    div#mwrapper {
        width: 320px;
        height: 50px;
    }
}

marginspace {
    display: block;
    position: relative;
    height: 150px;
    width: 1024px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding: 25px 0;
}
#my-signin2,
#my-signin2-2 {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 275px;
    /*background-image: url("../images/UI/buttons/google-loginbutton-medium.png") !important;*/
}
login-buttons {
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}
.hidden {
    display: none;
}
.fb-login-button,
#my-signin2,
#my-signin2-2 {
    display: block !important;
    width: 275px;
    height: 30px;
    margin: 0 auto;
}
.fb-login-button {
    /*background-image: url("../images/UI/buttons/facebook-loginbutton-medium.png") !important;*/
    margin-bottom: 15px;
}
#justPlay-login {
    position: absolute;
    width: 280px;
    left: 36px;
    top: 70px;
}
#justPlay-login .fb-login-button {
    margin-bottom: 10px;
}

.fade-in-image {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.isDisabled {
    color: currentColor;
    text-decoration: none;
    pointer-events: none;
    visibility: hidden;
}
#menuStartGame {
    display: hidden;
}

/*** Account settings ***/
#deleteAccount {
    color: white;
    font-family: OdibeeSans;
    letter-spacing: 1px;
    cursor: pointer;
}
#privacyPolicy,
#privacyPolicy:hover,
#privacyPolicy:active {
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-family: OdibeeSans;
    letter-spacing: 1px;
}

/*** Login buttons ***/
#loginbuttons span.notice {
    color: transparent;
    display: none;
}
#loginbuttons #my-signin2 {
    margin-bottom: 10px;
}
#justPlay-login span.notice {
    color: #fff;
    position: relative;
    display: block;
    font-family: OdibeeSans;
    letter-spacing: 1px;
}

/*** LOGIN PAGE ONLY ***/
.noGame #wrapper {
    background-image: url("../images/UI/ui_frame.png");
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    min-height: 652px;
}
.noGame content,
.noGame logo,
.noGame key-icon,
.noGame input-bg {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.noGame content {
    display: block;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 340px;
    margin: 0 -webkit-calc(50% - 170px);
    margin: 0 -moz-calc(50% - 170px);
    margin: 0 calc(50% - 170px);
    padding: 63px 22px;
    box-sizing: border-box;
    overflow: hidden;
    height: 652px;
}
.noGame marginspace {
    height: 134px;
}
.noGame div#justPlay-login {
    display: none;
}
.noGame marginspace.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-image: url("../images/UI/ui_bottom_graphic.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    overflow: hidden;
}
.noGame logo {
    background-image: url(../images/UI/ui_logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 96px;
    width: 296px;
    margin: 0 auto 4px;
}
.noGame key-icon {
    /**
	background-image: url(../images/UI/ui_logo.png);
	background-repeat: no-repeat;
	background-position: center center; 
	background-color: #ffffff; **/
    height: 53px;
    width: 100px;
    margin: 0 auto 13px;
}
.noGame input-bg {
    background-image: url(../images/UI/ui_typebox.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 56px;
    width: 275px;
    margin: 0 auto 5px;
    display: none;
}
.noGame div#mainMenu {
    position: relative;
    height: auto;
    top: 20px;
}
.noGame div#mainMenuPadder,
.noGame div#topMenu,
.noGame div#game,
.noGame #deleteAccount,
.noGame #privacyPolicy,
.noGame div#UIloadingScreen {
    display: none;
}
div#game {
    position: relative;
}
.noGame .fb-login-button {
    margin-bottom: 20px;
}
.noGame marginspace.bottom {
    height: 200px;
}
.noGame #debug {
    height: 100%;
}
.noGame #privacyPolicy {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 35px;
    cursor: pointer;
}

/*** Just play -button ***/
#menuStartGame {
    display: block;
    width: 140px;
    height: 74px;
    line-height: 70px;
    background: url("../images/UI/uibuttons.png");
    background-position: 0% 0%;
    text-align: center;
    text-shadow: 0 0 6px black;
    font-family: OdibeeSans;
    font-size: 20px; /*1.3em;*/
    color: #f5deb2;
    pointer-events: auto;
    background-position: 0px 0px;
    position: relative;
    margin: 20px auto 0;
    letter-spacing: 1px;
}
#menuStartGame:active {
    background-position: 0px 74px;
}

/*** Loading screen only ***/
.loading #game {
    display: none;
}
.loading #deleteAccount,
.loading #privacyPolicy,
.noneGame div#UIloadingScreen {
    display: none;
}

/*** Advertisements ***/
.noGame advertisement.top,
.noGame advertisement.bottom,
.loading advertisement.top,
.loading advertisement.bottom {
    display: none;
}
.noGame advertisement.left,
.noGame advertisement.right,
.loading advertisement.left,
.loading advertisement.right {
    width: -webkit-calc(50% - 30px) !important;
    width: -moz-calc(50% - 30px) !important;
    width: calc(50% - 30px) !important;
    margin: 0 auto;
}
@media all and (max-width: 1024px) {
    advertisement.top,
    advertisement.bottom,
    marginspace {
        width: 100%;
    }
    #debug {
        display: none;
    }
}
@media all and (min-width: 800px) {
    .noGame advertisement.right,
    .noGame advertisement.left {
        display: flex;
    }
}

/*** Character Selection & Creator ***/
.characterSelect,
.characterCreator {
    color: #f5deb2;
    font-family: OdibeeSans;
    letter-spacing: 1px;
}
.characterSelect marginspace login-buttons,
.characterCreator marginspace login-buttons,
.characterSelect #topMenu,
.characterCreator #topMenu,
.characterSelect #game,
.characterCreator #game,
.characterSelect #deleteAccount,
.characterCreator #deleteAccount,
.characterSelect #privacyPolicy,
.characterCreator #privacyPolicy,
.characterCreator #mainMenu,
.characterSelect #mainMenu,
.characterCreator #UIloadingScreen,
.characterSelect #UIloadingScreen {
    display: none;
}
.characterSelect #UICharacterDisplay,
.characterCreator #UICharacterDisplay,
.characterSelect #UICharacterEditorOptions,
.characterCreator #UICharacterEditorOptions,
.characterSelect .clear,
.characterCreator .clear {
    display: block !important;
}
.characterSelect #UIcontent,
.characterCreator #UIcontent {
    display: block;
    height: auto;
    width: 770px;
}
.characterSelect #UIcontent,
.characterCreator #UIcontent,
#UICharacterName,
#UICharacterSelectionReady {
    margin: 0 auto;
}
#UICharacterSelectionReady:active {
    background-position: 0px 74px;
}
#UICharacterDisplay,
#UICharacterEditorOptions {
    height: 652px;
    overflow: hidden;
    background-repeat: no-repeat;
}
#UICharacterDisplay {
    width: calc(100% - 360px);
    float: left;
    background-image: url("../images/UI/images/ui_characterbg.png");
    background-position: top left;
    background-size: 550px 652px;
    padding: 140px 0px 0px 100px;
    box-sizing: border-box;
    margin-left: -20px;
}
#UICharacterEditorOptions {
    width: 382px;
    float: right;
    background-image: url("../images/UI/ui_frame.png");
    background-position: center center;
    margin-left: -25px;
    margin-right: 20px;
    padding: 42px 56px 48px;
    box-sizing: border-box;
}
#UICharacterModel {
    height: 405px;
    margin-bottom: -25px;
    overflow: hidden;
}
#UICharacterName,
#UICharacterNameEdit {
    height: 56px;
    width: 275px;
    line-height: 56px;
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
}
#UICharacterName {
    text-transform: uppercase;
}
#UICharacterNameEdit {
    background-image: url("../images/UI/ui_typebox.png");
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 5;
    position: relative;
    display: inline-block;
    white-space: pre-wrap;
}
.editable div {
    height: 0;
    display: inline-block;
    white-space: pre-wrap;
}
.editable br {
    display: none;
}
*[contenteditable="true"] {
    display: inline-block;
}
.UICharacterSelectButton {
    height: 56px;
    width: 100%;
    line-height: 56px;
    text-align: center;
    font-size: 20px;
    background-color: #716859;
    background-image: none;
    border: 1px solid #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 8px;
}
#UICharacterStartGame,
#UICharacterRandomize {
    margin: 25px auto 0;
}
div#UICharacterRandomize:active {
    background-position: -0 -74px;
}

/*** Character Selection ***/
.characterSelect #UICharacterNameEdit,
.characterSelect #UICharacterRandomize,
.characterSelect .UICharacterOption {
    display: none;
}

/*** Character Creator ***/
.characterCreator #UICharacterName,
.characterCreator .UICharacterSelectButton,
.characterCreator #UICharacterStartGame {
    display: none;
}
.characterCreator .UICharacterOption,
.characterCreator #UICharacterRandomize {
    display: block;
}
.characterCreator .UICharacterOption {
    background-image: url("../images/UI/ui_typebox.png");
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 5;
    position: relative;
    height: 56px;
    width: 275px;
    line-height: 56px;
    text-align: left;
    font-size: 20px;
    margin: 18px auto;
    box-sizing: border-box;
    padding: 0 15px;
    text-shadow: 0 0 6px black;
    font-size: 20px; /*1.1em;*/
}
.characterCreator #UICharacterSelectionReady {
    display: block !important;
}
.onGame logo,
.onGame key-icon,
.onGame input-bg {
    display: none;
}
.UICharacterController {
    float: right;
    margin-right: -15px;
    height: 56px;
}
.UICharacterController .previous,
.UICharacterController .selection,
.UICharacterController .next {
    float: left;
}
.UICharacterController .selection {
    margin: 0 -5 px;
    width: 70px;
    text-align: center;
    white-space: nowrap;
}
.UICharacterController .previous,
.UICharacterController .next {
    font-size: 24px;
    margin: -3px 0 0;
    padding: 0 20px;
    cursor: pointer;
}
@media all and (max-width: 800px) {
    #UICharacterEditorOptions {
        margin-right: -5px;
        margin-left: -35px;
    }
    #UICharacterDisplay {
        margin-left: -35px;
        width: calc(100% - 320px);
        padding: 140px 0px 0px 80px;
    }
    .characterSelect #UIcontent,
    .characterCreator #UIcontent {
        width: 708px;
    }
}
@media all and (max-width: 750px) {
    #UICharacterEditorOptions {
        margin-right: -25px;
        margin-left: -65px;
    }
    #UICharacterDisplay {
        margin-left: -65px;
        width: calc(100% - 270px);
        padding: 140px 0px 0px 25px;
    }
    .characterSelect #UIcontent,
    .characterCreator #UIcontent {
        width: 580px;
    }
    #UICharacterName,
    #UICharacterNameEdit {
        width: 230px;
        margin: 0 0 0 45px;
    }
}

/*** Animations ***/
.fadein {
    -webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.5s; /* Firefox < 16 */
    -ms-animation: fadein 1.5s; /* Internet Explorer */
    -o-animation: fadein 1.5s; /* Opera < 12.1 */
    animation: fadein 1.5s;
    opacity: 1;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeout {
    -webkit-animation: fadeout 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeout 2s; /* Firefox < 16 */
    -ms-animation: fadeout 2s; /* Internet Explorer */
    -o-animation: fadeout 2s; /* Opera < 12.1 */
    animation: fadeout 2s;
    opacity: 0;
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* Firefox < 16 */
@-moz-keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* Internet Explorer */
@-ms-keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* Opera < 12.1 */
@-o-keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*** Vendor / Blacksmith view elements ***/
div#UIBlacksmithSelection {
    width: 370px;
    height: 360px;
    margin: 10px 0 0;
    float: right;
}
#game.vendor-view.Blacksmith div#UIVendorSelection {
    display: none;
}
#game.vendor-view.Vendor div#UIBlacksmithSelection {
    display: none;
}
div#UIItemBG,
div#UIBannerBar,
div#UIBannerFlag,
div#UIVendorSelection,
div#UIBlacksmithSelection {
    display: none;
}
div#UIBannerBar,
div#UIBannerFlag {
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin: 0 auto;
}
div#UIBannerBar {
    background: url(../images/UI/images/shopbanner-top.png);
    width: 344px;
    height: 42px;
}
div#UIBannerFlag {
    background: url(../images/UI/images/shopbanner-flag.png);
    width: 278px;
    height: 101px;
    margin-top: -25px;
}
div#UIItemBG {
    background: url(../images/UI/images/shop-itemBG.png);
    width: 436px;
    height: 410px;
    float: right;
    margin: -44px 0 0;
}
div#UIVendorText {
    display: none;
    margin-top: 23px;
    font-size: 28px;
    color: #d9a3db;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
}
div#UIVendorSelection {
    display: none;
    width: 370px;
    height: 360px;
    margin: 80px 0 0;
    float: right;
}
#UIVendorSelection div.UIItemSlotBg {
    box-sizing: border-box;
}
div#UIVendorTitleBar,
div#UIBlacksmithTitleBar {
    color: #f5deb2;
    font-family: OdibeeSans;
    font-size: 22px; /*1.4em;*/
    line-height: 20px;
    display: block;
    width: 340px;
    margin: 0 0 12px 6px;
    letter-spacing: 1px;
    text-align: center;
}
.Common div#UIBlacksmithTitleBar {
    color: #b8b8b8;
}
.Magical div#UIBlacksmithTitleBar {
    color: #0046ff;
}
.Rare div#UIBlacksmithTitleBar {
    color: #ffc900;
}
.Epic div#UIBlacksmithTitleBar {
    color: #7800e7;
}
.Legendary div#UIBlacksmithTitleBar {
    color: #ff8000;
}
#UIVendorSelection div.UIButton {
    position: absolute;
    bottom: 20px;
    z-index: 10;
}
#UIVendorChat {
    right: 350px;
    background-position: -140px 0px;
}
div#UIVendorChat:active {
    background-position: -140px -74px;
}
#UIBlacksmithChat {
    right: 350px;
    background-position: -140px 0px;
}
div#UIBlacksmithChat:active {
    background-position: -140px -74px;
}
#UIVendorPurchase {
    right: 200px;
    background-position: -140px 0px;
}
div#UIVendorPurchase:active {
    background-position: -140px -74px;
}
#UIVendorBuyBack {
    right: 55px;
    background-position: -280px 0px;
}
div#UIVendorBuyBack:active {
    background-position: -280px -74px;
}
#UIVendorSelection.Purchase #item_16,
#UIVendorSelection.Purchase #item_17,
#UIVendorSelection.Purchase #item_18,
#UIVendorSelection.Purchase #item_19,
#UIVendorSelection.Purchase #item_20,
#UIVendorSelection.Purchase #item_21,
#UIVendorSelection.Purchase #item_22,
#UIVendorSelection.Purchase #item_23,
#UIVendorSelection.Purchase #item_24,
#UIVendorSelection.Purchase #item_25,
#UIVendorSelection.Purchase #item_26,
#UIVendorSelection.Purchase #item_27,
#UIVendorSelection.Purchase #item_28,
#UIVendorSelection.Purchase #item_29,
#UIVendorSelection.Purchase #item_30 {
    display: none;
}
#UIVendorSelection.BuyBack #item_1,
#UIVendorSelection.BuyBack #item_2,
#UIVendorSelection.BuyBack #item_3,
#UIVendorSelection.BuyBack #item_4,
#UIVendorSelection.BuyBack #item_5,
#UIVendorSelection.BuyBack #item_6,
#UIVendorSelection.BuyBack #item_7,
#UIVendorSelection.BuyBack #item_8,
#UIVendorSelection.BuyBack #item_9,
#UIVendorSelection.BuyBack #item_10,
#UIVendorSelection.BuyBack #item_11,
#UIVendorSelection.BuyBack #item_12,
#UIVendorSelection.BuyBack #item_13,
#UIVendorSelection.BuyBack #item_14,
#UIVendorSelection.BuyBack #item_15 {
    display: none;
}

/*** Blacksmith ***/

.Blacksmith #UIVendorSelection,
.Blacksmith #UIVendorTitleBar,
.Vendor #UIBlacksmithSelection,
.Vendor #UIBlacksmithTitleBar {
    display: none !important;
}
#UIBlacksmithSelection div.UIButton {
    position: absolute;
    bottom: 20px;
    z-index: 10;
}
#UIBlacksmithWeapons {
    right: 200px;
    background-position: -140px 0px;
}
div#UIBlacksmithWeapons:active {
    background-position: -140px -74px;
}
#UIBlacksmithArmor {
    right: 55px;
    background-position: -280px 0px;
}
div#UIBlacksmithArmor:active {
    background-position: -280px -74px;
}
#UIBlacksmithSelection div.UIItemSlotBg {
    display: block;
    background-position: 0;
}
#UIBlacksmithSelection.Weapons #item_16,
#UIBlacksmithSelection.Weapons #item_17,
#UIBlacksmithSelection.Weapons #item_18,
#UIBlacksmithSelection.Weapons #item_19,
#UIBlacksmithSelection.Weapons #item_20,
#UIBlacksmithSelection.Weapons #item_21,
#UIBlacksmithSelection.Weapons #item_22,
#UIBlacksmithSelection.Weapons #item_23,
#UIBlacksmithSelection.Weapons #item_24,
#UIBlacksmithSelection.Weapons #item_25,
#UIBlacksmithSelection.Weapons #item_26,
#UIBlacksmithSelection.Weapons #item_27,
#UIBlacksmithSelection.Weapons #item_28,
#UIBlacksmithSelection.Weapons #item_29,
#UIBlacksmithSelection.Weapons #item_30 {
    display: none;
}
#UIBlacksmithSelection.Armor #item_1,
#UIBlacksmithSelection.Armor #item_2,
#UIBlacksmithSelection.Armor #item_3,
#UIBlacksmithSelection.Armor #item_4,
#UIBlacksmithSelection.Armor #item_5,
#UIBlacksmithSelection.Armor #item_6,
#UIBlacksmithSelection.Armor #item_7,
#UIBlacksmithSelection.Armor #item_8,
#UIBlacksmithSelection.Armor #item_9,
#UIBlacksmithSelection.Armor #item_10,
#UIBlacksmithSelection.Armor #item_11,
#UIBlacksmithSelection.Armor #item_12,
#UIBlacksmithSelection.Armor #item_13,
#UIBlacksmithSelection.Armor #item_14,
#UIBlacksmithSelection.Armor #item_15 {
    display: none;
}
#UIBlacksmithSelection #item_1,
#UIBlacksmithSelection #item_2,
#UIBlacksmithSelection #item_3,
#UIBlacksmithSelection #item_4,
#UIBlacksmithSelection #item_5,
#UIBlacksmithSelection #item_6,
#UIBlacksmithSelection #item_7,
#UIBlacksmithSelection #item_8,
#UIBlacksmithSelection #item_9,
#UIBlacksmithSelection #item_10,
#UIBlacksmithSelection #item_11,
#UIBlacksmithSelection #item_12,
#UIBlacksmithSelection #item_13,
#UIBlacksmithSelection #item_14,
#UIBlacksmithSelection #item_15 {
    animation-name: newItem1;
}
#UIBlacksmithSelection .UIItemSlotBg.active {
    transform: scale(1.3);
}
#UIBlacksmithSelection #item_1,
#UIBlacksmithSelection #item_1.Junk {
    background-position: -910px 0px, -630px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_1.active,
#UIBlacksmithSelection #item_1.Junk.active {
    background-position: -140px 0px, -630px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_1 {
    background-position: -910px 0px, -630px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_1.active {
    background-position: -140px 0px, -630px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_1 {
    background-position: -910px 0px, -630px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_1.active {
    background-position: -140px 0px, -630px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_1 {
    background-position: -910px 0px, -630px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_1.active {
    background-position: -140px 0px, -630px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_1 {
    background-position: -910px 0px, -630px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_1.active {
    background-position: -140px 0px, -630px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_1 {
    background-position: -910px 0px, -630px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_1.active {
    background-position: -140px 0px, -630px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_1 {
    background-position: -910px 0px, -630px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_1.active {
    background-position: -140px 0px, -630px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_1 {
    background-position: -910px 0px, -630px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_1.active {
    background-position: -140px 0px, -630px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_1 {
    background-position: -910px 0px, -630px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_1.active {
    background-position: -140px 0px, -630px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_1 {
    background-position: -910px 0px, -630px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_1.active {
    background-position: -140px 0px, -630px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_2,
#UIBlacksmithSelection #item_2.Junk {
    background-position: -910px 0px, -700px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_2.active,
#UIBlacksmithSelection #item_2.Junk.active {
    background-position: -140px 0px, -700px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_2 {
    background-position: -910px 0px, -700px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_2.active {
    background-position: -140px 0px, -700px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_2 {
    background-position: -910px 0px, -700px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_2.active {
    background-position: -140px 0px, -700px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_2 {
    background-position: -910px 0px, -700px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_2.active {
    background-position: -140px 0px, -700px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_2 {
    background-position: -910px 0px, -700px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_2.active {
    background-position: -140px 0px, -700px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_2 {
    background-position: -910px 0px, -700px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_2.active {
    background-position: -140px 0px, -700px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_2 {
    background-position: -910px 0px, -700px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_2.active {
    background-position: -140px 0px, -700px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_2 {
    background-position: -910px 0px, -700px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_2.active {
    background-position: -140px 0px, -700px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_2 {
    background-position: -910px 0px, -700px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_2.active {
    background-position: -140px 0px, -700px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_2 {
    background-position: -910px 0px, -700px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_2.active {
    background-position: -140px 0px, -700px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_3,
#UIBlacksmithSelection #item_3.Junk {
    background-position: -910px 0px, -770px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_3.active,
#UIBlacksmithSelection #item_3.Junk.active {
    background-position: -140px 0px, -770px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_3 {
    background-position: -910px 0px, -770px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_3.active {
    background-position: -140px 0px, -770px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_3 {
    background-position: -910px 0px, -770px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_3.active {
    background-position: -140px 0px, -770px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_3 {
    background-position: -910px 0px, -770px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_3.active {
    background-position: -140px 0px, -770px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_3 {
    background-position: -910px 0px, -770px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_3.active {
    background-position: -140px 0px, -770px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_3 {
    background-position: -910px 0px, -770px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_3.active {
    background-position: -140px 0px, -770px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_3 {
    background-position: -910px 0px, -770px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_3.active {
    background-position: -140px 0px, -770px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_3 {
    background-position: -910px 0px, -770px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_3.active {
    background-position: -140px 0px, -770px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_3 {
    background-position: -910px 0px, -770px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_3.active {
    background-position: -140px 0px, -770px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_3 {
    background-position: -910px 0px, -770px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_3.active {
    background-position: -140px 0px, -770px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_4,
#UIBlacksmithSelection #item_4.Junk {
    background-position: -910px 0px, -840px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_4.active,
#UIBlacksmithSelection #item_4.Junk.active {
    background-position: -140px 0px, -840px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_4 {
    background-position: -910px 0px, -840px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_4.active {
    background-position: -140px 0px, -840px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_4 {
    background-position: -910px 0px, -840px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_4.active {
    background-position: -140px 0px, -840px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_4 {
    background-position: -910px 0px, -840px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_4.active {
    background-position: -140px 0px, -840px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_4 {
    background-position: -910px 0px, -840px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_4.active {
    background-position: -140px 0px, -840px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_4 {
    background-position: -910px 0px, -840px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_4.active {
    background-position: -140px 0px, -840px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_4 {
    background-position: -910px 0px, -840px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_4.active {
    background-position: -140px 0px, -840px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_4 {
    background-position: -910px 0px, -840px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_4.active {
    background-position: -140px 0px, -840px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_4 {
    background-position: -910px 0px, -840px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_4.active {
    background-position: -140px 0px, -840px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_4 {
    background-position: -910px 0px, -840px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_4.active {
    background-position: -140px 0px, -840px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_5,
#UIBlacksmithSelection #item_5.Junk {
    background-position: -910px 0px, -910px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_5.active,
#UIBlacksmithSelection #item_5.Junk.active {
    background-position: -140px 0px, -910px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_5 {
    background-position: -910px 0px, -910px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_5.active {
    background-position: -140px 0px, -910px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_5 {
    background-position: -910px 0px, -910px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_5.active {
    background-position: -140px 0px, -910px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_5 {
    background-position: -910px 0px, -910px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_5.active {
    background-position: -140px 0px, -910px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_5 {
    background-position: -910px 0px, -910px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_5.active {
    background-position: -140px 0px, -910px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_5 {
    background-position: -910px 0px, -910px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_5.active {
    background-position: -140px 0px, -910px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_5 {
    background-position: -910px 0px, -910px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_5.active {
    background-position: -140px 0px, -910px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_5 {
    background-position: -910px 0px, -910px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_5.active {
    background-position: -140px 0px, -910px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_5 {
    background-position: -910px 0px, -910px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_5.active {
    background-position: -140px 0px, -910px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_5 {
    background-position: -910px 0px, -910px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_5.active {
    background-position: -140px 0px, -910px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_6,
#UIBlacksmithSelection #item_6.Junk {
    background-position: -910px 0px, -980px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_6.active,
#UIBlacksmithSelection #item_6.Junk.active {
    background-position: -140px 0px, -980px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_6 {
    background-position: -910px 0px, -980px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_6.active {
    background-position: -140px 0px, -980px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_6 {
    background-position: -910px 0px, -980px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_6.active {
    background-position: -140px 0px, -980px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_6 {
    background-position: -910px 0px, -980px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_6.active {
    background-position: -140px 0px, -980px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_6 {
    background-position: -910px 0px, -980px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_6.active {
    background-position: -140px 0px, -980px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_6 {
    background-position: -910px 0px, -980px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_6.active {
    background-position: -140px 0px, -980px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_6 {
    background-position: -910px 0px, -980px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_6.active {
    background-position: -140px 0px, -980px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_6 {
    background-position: -910px 0px, -980px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_6.active {
    background-position: -140px 0px, -980px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_6 {
    background-position: -910px 0px, -980px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_6.active {
    background-position: -140px 0px, -980px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_6 {
    background-position: -910px 0px, -980px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_6.active {
    background-position: -140px 0px, -980px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_7,
#UIBlacksmithSelection #item_7.Junk {
    background-position: -910px 0px, -1050px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_7.active,
#UIBlacksmithSelection #item_7.Junk.active {
    background-position: -140px 0px, -1050px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_7 {
    background-position: -910px 0px, -1050px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_7.active {
    background-position: -140px 0px, -1050px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_7 {
    background-position: -910px 0px, -1050px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_7.active {
    background-position: -140px 0px, -1050px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_7 {
    background-position: -910px 0px, -1050px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_7.active {
    background-position: -140px 0px, -1050px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_7 {
    background-position: -910px 0px, -1050px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_7.active {
    background-position: -140px 0px, -1050px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_7 {
    background-position: -910px 0px, -1050px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_7.active {
    background-position: -140px 0px, -1050px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_7 {
    background-position: -910px 0px, -1050px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_7.active {
    background-position: -140px 0px, -1050px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_7 {
    background-position: -910px 0px, -1050px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_7.active {
    background-position: -140px 0px, -1050px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_7 {
    background-position: -910px 0px, -1050px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_7.active {
    background-position: -140px 0px, -1050px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_7 {
    background-position: -910px 0px, -1050px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_7.active {
    background-position: -140px 0px, -1050px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_8,
#UIBlacksmithSelection #item_8.Junk {
    background-position: -910px 0px, -1120px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_8.active,
#UIBlacksmithSelection #item_8.Junk.active {
    background-position: -140px 0px, -1120px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_8 {
    background-position: -910px 0px, -1120px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_8.active {
    background-position: -140px 0px, -1120px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_8 {
    background-position: -910px 0px, -1120px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_8.active {
    background-position: -140px 0px, -1120px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_8 {
    background-position: -910px 0px, -1120px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_8.active {
    background-position: -140px 0px, -1120px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_8 {
    background-position: -910px 0px, -1120px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_8.active {
    background-position: -140px 0px, -1120px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_8 {
    background-position: -910px 0px, -1120px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_8.active {
    background-position: -140px 0px, -1120px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_8 {
    background-position: -910px 0px, -1120px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_8.active {
    background-position: -140px 0px, -1120px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_8 {
    background-position: -910px 0px, -1120px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_8.active {
    background-position: -140px 0px, -1120px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_8 {
    background-position: -910px 0px, -1120px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_8.active {
    background-position: -140px 0px, -1120px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_8 {
    background-position: -910px 0px, -1120px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_8.active {
    background-position: -140px 0px, -1120px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_9,
#UIBlacksmithSelection #item_9.Junk {
    background-position: -910px 0px, -1190px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_9.active,
#UIBlacksmithSelection #item_9.Junk.active {
    background-position: -140px 0px, -1190px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_9 {
    background-position: -910px 0px, -1190px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_9.active {
    background-position: -140px 0px, -1190px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_9 {
    background-position: -910px 0px, -1190px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_9.active {
    background-position: -140px 0px, -1190px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_9 {
    background-position: -910px 0px, -1190px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_9.active {
    background-position: -140px 0px, -1190px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_9 {
    background-position: -910px 0px, -1190px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_9.active {
    background-position: -140px 0px, -1190px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_9 {
    background-position: -910px 0px, -1190px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_9.active {
    background-position: -140px 0px, -1190px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_9 {
    background-position: -910px 0px, -1190px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_9.active {
    background-position: -140px 0px, -1190px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_9 {
    background-position: -910px 0px, -1190px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_9.active {
    background-position: -140px 0px, -1190px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_9 {
    background-position: -910px 0px, -1190px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_9.active {
    background-position: -140px 0px, -1190px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_9 {
    background-position: -910px 0px, -1190px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_10.active {
    background-position: -140px 0px, -1190px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_10,
#UIBlacksmithSelection #item_10.Junk {
    background-position: -910px 0px, -1260px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_10.active,
#UIBlacksmithSelection #item_10.Junk.active {
    background-position: -140px 0px, -1260px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_10 {
    background-position: -910px 0px, -1260px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_10.active {
    background-position: -140px 0px, -1260px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_10 {
    background-position: -910px 0px, -1260px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_10.active {
    background-position: -140px 0px, -1260px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_10 {
    background-position: -910px 0px, -1260px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_10.active {
    background-position: -140px 0px, -1260px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_10 {
    background-position: -910px 0px, -1260px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_10.active {
    background-position: -140px 0px, -1260px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_10 {
    background-position: -910px 0px, -1260px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_10.active {
    background-position: -140px 0px, -1260px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_10 {
    background-position: -910px 0px, -1260px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_10.active {
    background-position: -140px 0px, -1260px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_10 {
    background-position: -910px 0px, -1260px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_10.active {
    background-position: -140px 0px, -1260px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_10 {
    background-position: -910px 0px, -1260px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_10.active {
    background-position: -140px 0px, -1260px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_10 {
    background-position: -910px 0px, -1260px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_10.active {
    background-position: -140px 0px, -1260px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_11,
#UIBlacksmithSelection #item_11.Junk {
    background-position: -910px 0px, -1330px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_11.active,
#UIBlacksmithSelection #item_11.Junk.active {
    background-position: -140px 0px, -1330px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_11 {
    background-position: -910px 0px, -1330px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_11.active {
    background-position: -140px 0px, -1330px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_11 {
    background-position: -910px 0px, -1330px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_11.active {
    background-position: -140px 0px, -1330px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_11 {
    background-position: -910px 0px, -1330px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_11.active {
    background-position: -140px 0px, -1330px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_11 {
    background-position: -910px 0px, -1330px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_11.active {
    background-position: -140px 0px, -1330px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_11 {
    background-position: -910px 0px, -1330px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_11.active {
    background-position: -140px 0px, -1330px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_11 {
    background-position: -910px 0px, -1330px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_11.active {
    background-position: -140px 0px, -1330px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_11 {
    background-position: -910px 0px, -1330px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_11.active {
    background-position: -140px 0px, -1330px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_11 {
    background-position: -910px 0px, -1330px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_11.active {
    background-position: -140px 0px, -1330px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_11 {
    background-position: -910px 0px, -1330px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_11.active {
    background-position: -140px 0px, -1330px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_12,
#UIBlacksmithSelection #item_13,
#UIBlacksmithSelection #item_14,
#UIBlacksmithSelection #item_15 {
    display: none;
}
#UIBlacksmithSelection #item_16,
#UIBlacksmithSelection #item_17,
#UIBlacksmithSelection #item_18,
#UIBlacksmithSelection #item_19,
#UIBlacksmithSelection #item_20,
#UIBlacksmithSelection #item_21,
#UIBlacksmithSelection #item_22,
#UIBlacksmithSelection #item_23,
#UIBlacksmithSelection #item_24,
#UIBlacksmithSelection #item_25,
#UIBlacksmithSelection #item_26,
#UIBlacksmithSelection #item_27,
#UIBlacksmithSelection #item_28,
#UIBlacksmithSelection #item_29,
#UIBlacksmithSelection #item_30 {
    animation-name: newItem1;
}
#UIBlacksmithSelection #item_16,
#UIBlacksmithSelection #item_16.Junk {
    background-position: -910px 0px, -350px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_16.active,
#UIBlacksmithSelection #item_16.Junk.active {
    background-position: -140px 0px, -350px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_16 {
    background-position: -910px 0px, -350px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_16.active {
    background-position: -140px 0px, -350px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_16 {
    background-position: -910px 0px, -350px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_16.active {
    background-position: -140px 0px, -350px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_16 {
    background-position: -910px 0px, -350px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_16.active {
    background-position: -140px 0px, -350px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_16 {
    background-position: -910px 0px, -350px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_16.active {
    background-position: -140px 0px, -350px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_16 {
    background-position: -910px 0px, -350px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_16.active {
    background-position: -140px 0px, -350px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_16 {
    background-position: -910px 0px, -350px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_16.active {
    background-position: -140px 0px, -350px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_16 {
    background-position: -910px 0px, -350px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_16.active {
    background-position: -140px 0px, -350px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_16 {
    background-position: -910px 0px, -350px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_16.active {
    background-position: -140px 0px, -350px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_16 {
    background-position: -910px 0px, -350px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_16.active {
    background-position: -140px 0px, -350px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_17,
#UIBlacksmithSelection #item_17.Junk {
    background-position: -910px 0px, -420px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_17.active,
#UIBlacksmithSelection #item_17.Junk.active {
    background-position: -140px 0px, -420px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_17 {
    background-position: -910px 0px, -420px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_17.active {
    background-position: -140px 0px, -420px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_17 {
    background-position: -910px 0px, -420px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_17.active {
    background-position: -140px 0px, -420px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_17 {
    background-position: -910px 0px, -420px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_17.active {
    background-position: -140px 0px, -420px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_17 {
    background-position: -910px 0px, -420px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_17.active {
    background-position: -140px 0px, -420px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_17 {
    background-position: -910px 0px, -420px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_17.active {
    background-position: -140px 0px, -420px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_17 {
    background-position: -910px 0px, -420px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_17.active {
    background-position: -140px 0px, -420px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_17 {
    background-position: -910px 0px, -420px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_17.active {
    background-position: -140px 0px, -420px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_17 {
    background-position: -910px 0px, -420px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_17.active {
    background-position: -140px 0px, -420px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_17 {
    background-position: -910px 0px, -420px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_17.active {
    background-position: -140px 0px, -420px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_18,
#UIBlacksmithSelection #item_18.Junk {
    background-position: -910px 0px, -560px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_18.active,
#UIBlacksmithSelection #item_18.Junk.active {
    background-position: -140px 0px, -560px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_18 {
    background-position: -910px 0px, -560px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_18.active {
    background-position: -140px 0px, -560px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_18 {
    background-position: -910px 0px, -560px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_18.active {
    background-position: -140px 0px, -560px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_18 {
    background-position: -910px 0px, -560px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_18.active {
    background-position: -140px 0px, -560px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_18 {
    background-position: -910px 0px, -560px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_18.active {
    background-position: -140px 0px, -560px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_18 {
    background-position: -910px 0px, -560px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_18.active {
    background-position: -140px 0px, -560px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_18 {
    background-position: -910px 0px, -560px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_18.active {
    background-position: -140px 0px, -560px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_18 {
    background-position: -910px 0px, -560px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_18.active {
    background-position: -140px 0px, -560px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_18 {
    background-position: -910px 0px, -560px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_18.active {
    background-position: -140px 0px, -560px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_18 {
    background-position: -910px 0px, -560px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_18.active {
    background-position: -140px 0px, -560px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_19,
#UIBlacksmithSelection #item_19.Junk {
    background-position: -910px 0px, -490px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_19.active,
#UIBlacksmithSelection #item_19.Junk.active {
    background-position: -140px 0px, -490px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_19 {
    background-position: -910px 0px, -490px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_19.active {
    background-position: -140px 0px, -490px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_19 {
    background-position: -910px 0px, -490px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_19.active {
    background-position: -140px 0px, -490px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_19 {
    background-position: -910px 0px, -490px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_19.active {
    background-position: -140px 0px, -490px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_19 {
    background-position: -910px 0px, -490px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_19.active {
    background-position: -140px 0px, -490px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_19 {
    background-position: -910px 0px, -490px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_19.active {
    background-position: -140px 0px, -490px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_19 {
    background-position: -910px 0px, -490px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_19.active {
    background-position: -140px 0px, -490px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_19 {
    background-position: -910px 0px, -490px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_19.active {
    background-position: -140px 0px, -490px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_19 {
    background-position: -910px 0px, -490px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_19.active {
    background-position: -140px 0px, -490px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_19 {
    background-position: -910px 0px, -490px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_19.active {
    background-position: -140px 0px, -490px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_20,
#UIBlacksmithSelection #item_20.Junk {
    background-position: -910px 0px, -280px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_20.active,
#UIBlacksmithSelection #item_20.Junk.active {
    background-position: -140px 0px, -280px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_20 {
    background-position: -910px 0px, -280px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_20.active {
    background-position: -140px 0px, -280px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_20 {
    background-position: -910px 0px, -280px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_20.active {
    background-position: -140px 0px, -280px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_20 {
    background-position: -910px 0px, -280px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_20.active {
    background-position: -140px 0px, -280px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_20 {
    background-position: -910px 0px, -280px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_20.active {
    background-position: -140px 0px, -280px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_20 {
    background-position: -910px 0px, -280px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_20.active {
    background-position: -140px 0px, -280px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_20 {
    background-position: -910px 0px, -280px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_20.active {
    background-position: -140px 0px, -280px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_20 {
    background-position: -910px 0px, -280px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_20.active {
    background-position: -140px 0px, -280px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_20 {
    background-position: -910px 0px, -280px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_20.active {
    background-position: -140px 0px, -280px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_20 {
    background-position: -910px 0px, -280px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_20.active {
    background-position: -140px 0px, -280px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_21,
#UIBlacksmithSelection #item_22.Junk {
    background-position: -910px 0px, -140px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_21.active,
#UIBlacksmithSelection #item_21.Junk.active {
    background-position: -140px 0px, -140px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_21 {
    background-position: -910px 0px, -140px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_21.active {
    background-position: -140px 0px, -140px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_21 {
    background-position: -910px 0px, -140px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_21.active {
    background-position: -140px 0px, -140px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_21 {
    background-position: -910px 0px, -140px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_21.active {
    background-position: -140px 0px, -140px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_21 {
    background-position: -910px 0px, -140px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_21.active {
    background-position: -140px 0px, -140px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_21 {
    background-position: -910px 0px, -140px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_21.active {
    background-position: -140px 0px, -140px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_21 {
    background-position: -910px 0px, -140px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_21.active {
    background-position: -140px 0px, -140px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_21 {
    background-position: -910px 0px, -140px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_21.active {
    background-position: -140px 0px, -140px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_21 {
    background-position: -910px 0px, -140px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_21.active {
    background-position: -140px 0px, -140px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_21 {
    background-position: -910px 0px, -140px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_21.active {
    background-position: -140px 0px, -140px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_22,
#UIBlacksmithSelection #item_22.Junk {
    background-position: -910px 0px, -210px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_22.active,
#UIBlacksmithSelection #item_22.Junk.active {
    background-position: -140px 0px, -210px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_22 {
    background-position: -910px 0px, -210px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_22.active {
    background-position: -140px 0px, -210px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_22 {
    background-position: -910px 0px, -210px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_22.active {
    background-position: -140px 0px, -210px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_22 {
    background-position: -910px 0px, -210px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_22.active {
    background-position: -140px 0px, -210px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_22 {
    background-position: -910px 0px, -210px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_22.active {
    background-position: -140px 0px, -210px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_22 {
    background-position: -910px 0px, -210px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_22.active {
    background-position: -140px 0px, -210px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_22 {
    background-position: -910px 0px, -210px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_22.active {
    background-position: -140px 0px, -210px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_22 {
    background-position: -910px 0px, -210px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_22.active {
    background-position: -140px 0px, -210px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_22 {
    background-position: -910px 0px, -210px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_22.active {
    background-position: -140px 0px, -210px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_22 {
    background-position: -910px 0px, -210px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_22.active {
    background-position: -140px 0px, -210px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_23,
#UIBlacksmithSelection #item_23.Junk {
    background-position: -910px 0px, 0px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_23.active,
#UIBlacksmithSelection #item_23.Junk.active {
    background-position: -140px 0px, 0px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_23 {
    background-position: -910px 0px, 0px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_23.active {
    background-position: -140px 0px, 0px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_23 {
    background-position: -910px 0px, 0px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_23.active {
    background-position: -140px 0px, 0px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_23 {
    background-position: -910px 0px, 0px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_23.active {
    background-position: -140px 0px, 0px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_23 {
    background-position: -910px 0px, 0px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_23.active {
    background-position: -140px 0px, 0px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_23 {
    background-position: -910px 0px, 0px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_23.active {
    background-position: -140px 0px, 0px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_23 {
    background-position: -910px 0px, 0px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_23.active {
    background-position: -140px 0px, 0px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_23 {
    background-position: -910px 0px, 0px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_23.active {
    background-position: -140px 0px, 0px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_23 {
    background-position: -910px 0px, 0px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_23.active {
    background-position: -140px 0px, 0px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_23 {
    background-position: -910px 0px, 0px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_23.active {
    background-position: -140px 0px, 0px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_24,
#UIBlacksmithSelection #item_24.Junk {
    background-position: -910px 0px, -70px -210px, -210px -140px;
}
#UIBlacksmithSelection #item_24.active,
#UIBlacksmithSelection #item_24.Junk.active {
    background-position: -140px 0px, -70px -210px, -210px -140px;
}
#UIBlacksmithSelection.Common #item_24 {
    background-position: -910px 0px, -70px -210px, -280px -140px;
}
#UIBlacksmithSelection.Common #item_24.active {
    background-position: -140px 0px, -70px -210px, -280px -140px;
}
#UIBlacksmithSelection.Magical #item_24 {
    background-position: -910px 0px, -70px -210px, -350px -140px;
}
#UIBlacksmithSelection.Magical #item_24.active {
    background-position: -140px 0px, -70px -210px, -350px -140px;
}
#UIBlacksmithSelection.Rare #item_24 {
    background-position: -910px 0px, -70px -210px, -420px -140px;
}
#UIBlacksmithSelection.Rare #item_24.active {
    background-position: -140px 0px, -70px -210px, -420px -140px;
}
#UIBlacksmithSelection.Epic #item_24 {
    background-position: -910px 0px, -70px -210px, -490px -140px;
}
#UIBlacksmithSelection.Epic #item_24.active {
    background-position: -140px 0px, -70px -210px, -490px -140px;
}
#UIBlacksmithSelection.Legendary #item_24 {
    background-position: -910px 0px, -70px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary #item_24.active {
    background-position: -140px 0px, -70px -210px, -560px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_24 {
    background-position: -910px 0px, -70px -210px, -630px -140px;
}
#UIBlacksmithSelection.Legendary2 #item_24.active {
    background-position: -140px 0px, -70px -210px, -630px -140px;
}
#UIBlacksmithSelection.Ancient #item_24 {
    background-position: -910px 0px, -70px -210px, -700px -140px;
}
#UIBlacksmithSelection.Ancient #item_24.active {
    background-position: -140px 0px, -70px -210px, -700px -140px;
}
#UIBlacksmithSelection.Runic #item_24 {
    background-position: -910px 0px, -70px -210px, -770px -140px;
}
#UIBlacksmithSelection.Runic #item_24.active {
    background-position: -140px 0px, -70px -210px, -770px -140px;
}
#UIBlacksmithSelection.Unique #item_24 {
    background-position: -910px 0px, -70px -210px, -840px -140px;
}
#UIBlacksmithSelection.Unique #item_24.active {
    background-position: -140px 0px, -70px -210px, -840px -140px;
}
#UIBlacksmithSelection #item_25,
#UIBlacksmithSelection #item_26,
#UIBlacksmithSelection #item_27,
#UIBlacksmithSelection #item_28,
#UIBlacksmithSelection #item_29,
#UIBlacksmithSelection #item_30 {
    display: none;
}

/*** DIAMOND BUTTONS ***/
#UIBlacksmithDiamondBar {
    display: block;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
}
div.UIDiamondButton {
    width: 70px;
    height: 70px;
    background: url("../images/UI/icons.png"), url("../images/UI/icons.png"), url("../images/UI/icons.png");
    float: left;
    transform-origin: 50% 50%;
    animation-duration: 0.2s, 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
#diamond_1 {
    background-position: 0 -350px, 0 -350px, 0 -350px;
}
#diamond_1.active {
    background-position: 0 -280px, 0 -280px, 0 -280px;
}
#diamond_2 {
    background-position: -70px -350px, -70px -350px, -70px -350px;
}
#diamond_2.active {
    background-position: -70px -280px, -70px -280px, -70px -280px;
}
#diamond_3 {
    background-position: -140px -350px, -140px -350px, -140px -350px;
}
#diamond_3.active {
    background-position: -140px -280px, -140px -280px, -140px -280px;
}
#diamond_4 {
    background-position: -210px -350px, -210px -350px, -210px -350px;
}
#diamond_4.active {
    background-position: -210px -280px, -210px -280px, -210px -280px;
}
#diamond_5 {
    background-position: -280px -350px, -280px -350px, -280px -350px;
}
#diamond_5.active {
    background-position: -280px -280px, -280px -280px, -280px -280px;
}

/*** Blacksmith tooltip ***/
.Tooltip.Blacksmith li#tt,
.Tooltip.Blacksmith ul li:nth-child(4),
.Tooltip.Blacksmith div#UITooltipDelete,
.Tooltip.Blacksmith div#UITooltipSell {
    background: none !important;
    display: none !important;
}

.Tooltip.Blacksmith div#UITooltipSelectedContent ul li:nth-child(5) {
    width: 100%;
    height: 20px;
}

/*
.Tooltip.Blacksmith div#UITooltipSelectedContent ul li:nth-last-child(3) {
	text-align: center;
	width: 100%;
}*/
.Tooltip.Centered div#UITooltipSelectedArea {
    right: 367px;
}
.Tooltip.Blacksmith div.UITooltipContent {
    padding-top: 20px;
}
.vendor-view .Blacksmith div#UITooltipCraft {
    display: block;
}
.Blacksmith div#UITooltipCompareArea {
    display: none;
}
div#UITooltipCraft {
    position: absolute;
    left: 10px;
    bottom: 20px;
    background-repeat: no-repeat;
    background-position: -140px 0px;
}
div#UITooltipCraft:active {
    background-position: -140px -74px;
}
div#UITooltipCraft {
    display: none;
}
.Tooltip.Blacksmith div#UITooltipSelectedContent p {
    display: inherit;
    font-family: OdibeeSans;
    text-shadow: 0 0 6px black;
    color: #d3d3d3;
    font-size: 16px; /*1em;*/
    letter-spacing: 1px;
    margin-top: 10px;
}