/* Eric Meyer's CSS reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Typography*/		

    @font-face {
        font-family: 'GraphicPixel';
        src: url('../fonts/graphicpixel-webfont.eot');
        src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/graphicpixel-webfont.woff') format('woff'),
             url('../fonts/graphicpixel-webfont.ttf') format('truetype'),
             url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg');
        font-weight: normal;
        font-style: normal;

    }
    
    @font-face {
        font-family: 'AdvoCut';
        src: url('../fonts/advocut-webfont.eot');
        src: url('../fonts/advocut-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/advocut-webfont.woff') format('woff'),
             url('../fonts/advocut-webfont.ttf') format('truetype'),
             url('../fonts/advocut-webfont.svg#AndinaRegular') format('svg');
        font-weight: normal;
        font-style: normal;

    }

	.gp {font-family: 'GraphicPixel', sans-serif;}

/* General Layout */	
	

    html {-webkit-text-size-adjust: 100%}
	html, body {height:100%;}
	
	body {padding:0;margin:0;background:#111;overflow:hidden;image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast;border-top:2px solid #707070;}
	
	canvas { position:absolute;image-rendering:optimizeSpeed;}
	#background { background:url('../img/common/loading.png') no-repeat center center, #000;}
	.error #background { background:url('../img/common/loading-error.png') no-repeat center center, #000;}
	
	#background, #foreground { margin:0; padding:0;}
    
    #achievements nav::selection {background:transparent;text-decoration:none;color:transparent;}
    #canvas, #bar-container, #bubbles, #chatbox, #canvasborder, #foreground, #background, footer, #container, #achievement-notification {-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;}
    
    .started #canvas {cursor:none;}
    
    #foreground { 
       -webkit-tap-highlight-color:rgba(0,0,0,0);
       /* -webkit-touch-callout:none; */
       /* margin:0 auto;
       display:block;*/
    }


	@media screen and (max-width: 600px) {
		#entities {
			cursor: default;
		}
	}

    h1 {font-weight:normal;}
    
/* Common rules */
    
    /* body.upscaled.game {background:#000;} */
    .game #logo {display:none;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;animation:none;}
        
    #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, #store, #settings, #party, #completed, #missing-account, #failed, .icon, #tilt, .parchment-left, .parchment-middle, .parchment-right, .avatar, .facebook, .twitter, .discord, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background:url('../img/1/spritesheet.png');image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast;}
    
    #moztab {height:49px;width:118px;position:fixed;top:0;right:15%;background:url('../img/1/spritesheet.png') no-repeat -229px -204px;display:block;}

    #vignetting {height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;}
    #logosparks {display:block;position:absolute;top:0;left:0;}
    #parchment, #parchment input, #parchment textarea, #store, .account-container input, #player-account-link {font-family:'GraphicPixel';}

    #parchment input, #parchment textarea, #store input, .account-container input { width:60%;background:rgba(0,0,0,0.05);text-align:center; }
    #parchment input, #parchment textarea, #store input, .account-container input:not(:readonly) {-moz-animation:glow 0.5s linear infinite alternate;-webkit-animation:glow 0.5s linear infinite alternate;-o-animation:glow 0.5s linear infinite alternate;-ms-animation:glow 0.5s linear infinite alternate;color:#eee;}
    /* .account-container input, .account-container textarea { width: 60%; } */
    #parchment input:focus, #parchment textarea:focus, #store input:focus, .account-container input:focus {-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;animation:none;color:#fff;background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.3);}
    #parchment input.field-error, #parchment textarea.field-error, .account-container input.field-error {background:rgba(255,0,0,0.1);border-color:#f84444;}
    /* .account-container { margin-top: 60px;} */
    #character div {-moz-transition:0.4s opacity linear;-webkit-transition:0.4s opacity linear;-o-transition:0.4s opacity linear;-ms-transition:0.4s opacity linear;transition:0.4s opacity linear;}

    #mask {height:100%;width:100%;position:fixed;top:0;left:0;background:rgba(20,20,20,1);opacity:1;z-index:20;-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;pointer-events:none;}

    #bar-container {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:relative;width:100%;z-index:10;}
    #healthbar {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;}
	#hitpoints {background:#d83939;-moz-transition:.5s width ease;-webkit-transition:.5s width ease;-o-transition:.5s width ease;-ms-transition:.5s width ease;transition:.5s width ease;}
    #hitpoints.white {-moz-animation:flash 0.5s linear 1;-webkit-animation:flash 0.5s linear 1;-o-animation:flash 0.5s linear 1;-ms-animation:flash 0.5s linear 1;animation:flash 0.5s linear 1;}
	#hitpoints.invincible {-moz-animation:invincible 0.3s steps(3, end) alternate infinite;-webkit-animation:invincible 0.3s steps(3, end) alternate infinite;-o-animation:invincible 0.3s steps(3, end) alternate infinite;-ms-animation:invincible 0.3s steps(3, end) alternate infinite;}
	#hpguide {background: rgb(128,64,64); position: absolute; display: none; }
    #notifications {position:absolute;left:50%;text-align:center;font-family:'GraphicPixel';overflow:hidden;}
    #notifications div {position:absolute;-moz-transition:none;-webkit-transition:none;top:0;width:100%;}
    #notifications div.top {-moz-transition:0.5s top ease;-webkit-transition:0.5s top ease;-o-transition:0.5s top ease;-ms-transition:0.5s top ease;transition:0.5s top ease;}
    #notifications div.top #message1 {opacity:0;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
    #notifications span {display:block;text-align:center;width:100%;opacity:1;-moz-user-select:none;-webkit-user-select:none;}

    #player-count {font-family:'GraphicPixel';color:#e3e3e3;position:absolute;}
    #player-count:hover {cursor:pointer;color:#FCE045;}
    .panel {position:absolute;font-family:'GraphicPixel';color:#fff;text-align:center;height:0;}
    .panel > div {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;opacity:0;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
    .panel {display: none;}
    .panel.visible {display: block;}
    .panel.visible > div {opacity:1;}
    .panel.visible {height:auto;}
    
    .barbutton {background:url('../img/1/barsheet.png');image-rendering:-moz-crispt-edges;position:absolute;}
    
    #chatbox {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;left:50%;z-index:5;-moz-transition:0.2s bottom ease;-webkit-transition:0.2s bottom ease;-o-transition:0.2s bottom ease;-ms-transition:0.2s bottom ease;transition:0.2s bottom ease;}
    #chatinput {color:#eee;}
    #chatinput.placeholder {color:#aaa;}

    div.clear{
      float: left;
      clear: both;
      width: 100%;
    }

    #dropDialog {
      font-family:'GraphicPixel';
      font-size: 9pt;
      color:#e3e3e3;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -76px;
      margin-top: -23px;
      padding: 5px;
      background: rgba(45, 45, 45, 0.8);
      border-radius: 6px 6px 6px 6px;
      display: none;
    }
    #dropDialog.active {
      display: block;
    }
    #dropTitle {
      text-align: center;
    }
    #dropAccept, #dropCancel {
      background: rgb(120, 120, 120);
      cursor: hand;
    }

    .line-through {
        text-decoration: line-through;
    }

    .bubble p {-moz-user-select:none;-webkit-user-select:none;}
    
    #instructions, #store, #settings, #party, #completed, #missing-account, #failed {position:absolute;top:50%;left:50%;z-index:1000;font-family:'GraphicPixel';pointer-events:none;opacity:0;-moz-transition:0.25s opacity linear;-webkit-transition:0.4s top ease, 0.4s opacity linear;-o-transition:0.4s top ease, 0.4s opacity linear;-ms-transition:0.4s top ease, 0.4s opacity linear;transition:0.4s top ease, 0.4s opacity linear;}
    #instructions.active, #store.active, #settings.active, #party.active, #achievements.active, #completed.active, #missing-account.active, #failed.active {opacity:1;pointer-events:auto;}
    
    #weapon, #armor, #skill-attack, #skill-defense {image-rendering:-moz-crisp-edges;}

    #achievements, #achievements li, .coin, #achievement-notification, #coinsparks, .achievement-sharing a, #previous, #next {background:url('../img/1/achievements.png');image-rendering:-moz-crisp-edges;}
    .item-gem, .item-potion {background-image:url('../img/1/achievements-unlocks.png');image-rendering:-moz-crisp-edges;opacity:0.75;}
    .item-gem.active, .item-potion.active { opacity:1;}
    #achievements {font-family:'GraphicPixel'; position:absolute;top:50%;left:50%;z-index:1000;opacity:0;pointer-events:none;-moz-transition:0.25s opacity linear;-webkit-transition:0.4s top ease, 0.4s opacity linear;-o-transition:0.4s top ease, 0.4s opacity linear;-ms-transition:0.4s top ease, 0.4s opacity linear;transition:0.4s top ease, 0.4s opacity linear;}
    #achievements li {clear:both;position:relative;}
    /* #achievements li .coin, #achievements li .achievement-name {float:left;} */
    #achievements li .coin {opacity:0;}
    #achievements li.unlocked .achievement-name {color:#fce045;}
    #achievements li.unlocked .coin {opacity:1;}
    #achievements .achievement-name { width: 23%; color:#fff;}
    #achievements .achievement-description {width:67.5%;}
    #achievement-notification {position:absolute;z-index:8;bottom:0;left:50%;text-align:center;font-family:'GraphicPixel';pointer-events:none;-moz-transition:0.3s height ease;-webkit-transition:0.3s height ease;-o-transition:0.3s height ease;-ms-transition:0.3s height ease;}
    #achievement-notification .name, #achievement-notification .title {opacity:0;-moz-transition:0.3s opacity linear;-webkit-transition:0.3s opacity linear;-o-transition:0.3s opacity linear;-ms-transition:0.3s opacity linear;transition:0.3s opacity linear;}
    #achievement-notification.active .name, #achievement-notification.active .title {opacity:1;}
    #achievement-info {overflow:hidden;height:100%;}
    .achievement-sharing {position:absolute;display:none;}
    #achievements li.unlocked:hover .achievement-sharing {display:block;}
    #achievements li.unlocked:hover .achievement-payout {display:none;}
    .achievement-sharing a {display:block;float:left;}
    
    #achievements .achievement-payout {
        position: absolute;
        right: 20px;
        top: calc(50% - 10px);
    }

	#bubbles a {pointer-events:auto;text-decoration:none;color:#fcda5c;}

    .link:hover {cursor:pointer;color:#d83939;}
    .play img {display:none;}
    .play.loading span:hover {color:inherit;cursor:default;}
    .play.loading img {display:inline;}
    #forget-player, #create-new, #create-new-account {margin-top:6px;}
    .playername {color:#fff;}
    .playerimage {image-rendering:pixelated;image-rendering:crisp-edges; margin-left: -1.25%;}
    .dimmed { color: #b2af9b !important}
    .loadcharacter .play div, .createpassword .play div {cursor:pointer;}

    .validation-summary { margin: 0 auto; text-align: center; min-height: 1.25rem; }
    .validation-error {color:#880000;text-shadow:2px 2px 2px #ff6666;}
    @keyframes blink { 0% {color:red;} 100% {color:#880000;}}
    @-webkit-keyframes blink { 0% {color:red;} 100% {color:#880000;}}
    .blink {-webkit-animation:blink 0.3s linear 5 alternate;-moz-animation:blink 0.3s linear 5 alternate;animation:blink 0.3s linear 5 alternate;}

    #credits, #loadcharacter, #banned, #createaccount, #createpassword, #enterpassword, #invalidconnection, #confirmation, #death, #store, #settings, #party, #error, #about, #legal {position:absolute;left:50%;text-align:center;font-family:'GraphicPixel', sans-serif;z-index:1000;}
    
    #player-image {image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast;}
    
    #parchment p {font-family:'GraphicPixel';}
    
    #credits, #death, #banned, #about {top:50%;}
    .intro #credits, .intro #about {top:55%;}
    #credits h1 a {color:#fcda5c;text-decoration:none;}
    #authors div a {display:block;color:#fff;text-decoration:none;}
    #authors div a:hover, #credits h1 a:hover {color:#93C1FF;}
    #seb {clear:both;}

    #portrait {display:none;}

    #about .link a:hover, #legal a:hover {color:#d83939;}

    footer {font-family:'GraphicPixel';position:absolute;bottom:5%;left:0;text-align:center;width:100%;color:#c6c0a3;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
    .upscaled.game footer {color:#8a8a8a;}
    
    .intro footer {opacity:1;}
    footer:hover {opacity:1;}
    footer div  {display:inline-block;}
    #sharing a {display:block;float:right;background-size:844px;position:relative;top:-2px;}
    #sharing .facebook {height:22px;width:22px;background-position:-822px -224px;margin:0 12px 0 12px;}
    #sharing .facebook:hover {background-position:-822px -224px;}
    #sharing .twitter {height:22px;width:32px;background-position:-770px -224px;margin:0 12px 0 0;}
    #sharing .twitter:hover {background-position:-770px -224px;}
    a .discord {    height: 24px;
        display: inline-block;
        width: 24px;
        background-size: 844px;
        background-position: -820px -252px;
        margin: 0px 6px -4px 0;}
    a:hover .discord {
        transform: scale(1.15);
    }
    #sharing .gplus {height:22px;width:22px;margin:0 12px 0 0px;}
    #toggle-credits {display:inline-block;margin-left:12px;}
    #legal-link a, #nano-link a {text-decoration:none;color:inherit;}
    #nano-link a {
        color: inherit;
        text-decoration: none;
    }
    #credits-link span:hover, #privacy-link span:hover, #legal-link a:hover, #nano-link a:hover {color:#fcda5c;cursor:pointer;}
    
    #sharing a:hover {-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
    #sharing a:active {-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}

    .close {position:absolute;z-index:20000;}
    .close:hover {cursor:pointer;}
    
    .ribbon {position:absolute;}
    .ribbon:hover {cursor:pointer;}
    .ribbon .top {-moz-transition:0.25s height ease;-webkit-transition:0.25s height ease;-o-transition:0.25s height ease;-ms-transition:0.25s height ease;transition:0.25s height ease;}
    
	.bubble {background:rgba(45,45,45,0.8);padding:0px 12px 0px 12px;border-radius:8px;color:rgba(255,255,255,0.8);display:inline-block;text-align:center;position:absolute;}
	.thingy {height:10px;width:11px;background:url('../img/common/thingy.png');margin:0 auto;margin-top:-10px;top:10px;position:relative;}
    
    .alert {height:50px;background:#d83939;width:100%;color:#eee;font-size:20px;font-family:'GraphicPixel', arial, sans-serif;text-align:center;line-height:50px;border-bottom:1px solid #000;}

    #instructions, #store, #settings, #party, #achievements, #completed, #missing-account, #failed, #lists, #about, #credits, .ribbon, .play, .play div, .barbutton {-webkit-tap-highlight-color:transparent;}
    /* #parchment input::-webkit-input-placeholder,#settings input::-webkit-input-placeholder {color:#fff;} */

    #resize-check {position:absolute;height:0;top:0;left:0;-moz-transition:0.001s height ease;-webkit-transition:0.001s height ease;-o-transition:0.001s height ease;-ms-transition:0.001s height ease;transition:0.001s height ease;}

    #death p {display:block; width: 70%; margin: 0 auto;}
    #death p em {display:block;font-style:normal;}
    
    #legal p {width:75%;font-size:25px;line-height:35px;}
    #legal p a {color:#2e7fdd;text-decoration:none;}
    #close-legal {font-size:20px;margin-top:30px;}
    #toggle-legal, #legal-link a, #nano-link a {padding:0 10px;}
    
    #createcharacter form {position:relative;}
    
    #name-tooltip {width:400px;height:30px;padding:10px 0;font-size:20px;background:#373737;position:absolute;left:50%;margin-left:-200px;color:#fff;border-radius:8px;line-height:30px;top:-40px;opacity:0;-moz-transition:0.25s opacity ease;-webkit-transition:0.25s opacity ease;-o-transition:0.25s opacity ease;-ms-transition:0.25s opacity ease;transition:0.25s opacity ease;pointer-events:none;}
    #name-tooltip:after {content:url('../img/common/arrow.png');width:28px;height:16px;position:absolute;bottom:-8px;left:50%;margin-left:-14px;}
    #name-tooltip.visible {opacity:.9;}
    
    .opera #name-tooltip {display:none;}
    .opera #name-tooltip.visible {display:block;}

/* Magic Parchment */

    .parchment-left {position:absolute;top:0;left:0%;}
    .parchment-right {position:absolute;top:0;right:0%;}
    .parchment-middle {position:absolute;left:50%;top:0;}
    .animate .parchment-left {-moz-animation:parchleft 1s ease 1;-webkit-animation:parchleft 1s ease 1;-o-animation:parchleft 1s ease 1;-ms-animation:parchleft 1s ease 1;animation:parchleft 1s ease 1;}
    .animate .parchment-right {-moz-animation:parchright 1s ease 1;-webkit-animation:parchright 1s ease 1;-o-animation:parchright 1s ease 1;-ms-animation:parchright 1s ease 1;animation:parchright 1s ease 1;}

    #credits, #createcharacter, #loadcharacter, #createaccount, #createpassword, #enterpassword, #banned, #invalidconnection, #confirmation, #death, #error, #about, #legal {
        display: none;pointer-events:none;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;
    }
    .credits #credits, .createcharacter #createcharacter, .createpassword #createpassword, .enterpassword #enterpassword, .loadcharacter #loadcharacter, .banned #banned, .createaccount #createaccount, .invalidconnection #invalidconnection, .confirmation #confirmation, .death #death, .error #error, .about #about, .legal #legal {
        display: block;pointer-events:auto;-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;
    }

/* States & Transitions */

    #intro {-moz-transition:0.4s opacity linear;-webkit-transition:0.4s opacity linear;-o-transition:0.4s opacity linear;-ms-transition:0.4s opacity linear;transition:0.4s opacity linear;}
    #mask, #logo, #parchment {opacity:0;}
    .intro #logo, .intro #parchment {opacity:1;}

    .game #confirmation, .game #loadcharacter, .game #createaccount, .game #invalidconnection, .game #createcharacter, .game #createpassword, .game #enterpassword, .game #error {display:none;}

    .game #parchment {z-index:0;-moz-transition:0.5s opacity linear 0.5s, 0s z-index linear 1s;-webkit-transition:0.5s opacity linear 0.5s, 0s z-index linear 1s;-o-transition:0.5s opacity linear 0.5s, 0s z-index linear 1s;-ms-transition:0.5s opacity linear 0.5s, 0s z-index linear 1s;transition:0.5s opacity linear 0.5s, 0s z-index linear 1s;top:50%;}
    .game #credits, .game #death, .game #banned, .game #about {opacity:0;-moz-transition:0s opacity linear 0s;-webkit-transition:0s opacity linear 0s;-o-transition:0s opacity linear 0s;-ms-transition:0s opacity linear 0s;transition:0s opacity linear 0s;}
    .game.credits #credits, .game.death #death, .game.banned #banned, .game.about #about, .game.legal #legal {opacity:1;-moz-transition:0.5s opacity linear 0.5s;-webkit-transition:0.5s opacity linear 0.5s;-o-transition:0.5s opacity linear 0.5s;-ms-transition:0.5s opacity linear 0.5s;transition:0.5s opacity linear 0.5s;}
    .game.credits #parchment, .game.death #parchment, .game.banned #parchment, .game.about #parchment, .game.legal #parchment {opacity:1;-moz-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-webkit-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-o-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-ms-transition:0.5s opacity linear 0s, 0s z-index linear 0s;transition:0.5s opacity linear 0s, 0s z-index linear 0s;z-index:200;}
    .game .parchment-left {-moz-transition:0.5s left ease;-webkit-transition:0.5s left ease;-o-transition:0.5s left ease;-ms-transition:0.5s left ease;transition:0.5s left ease;left:41%;}
    .game .parchment-right {-moz-transition:0.5s right ease;-webkit-transition:0.5s right ease;-o-transition:0.5s right ease;-ms-transition:0.5s right ease;transition:0.5s right ease;right:41%;}
    .game .parchment-middle {-moz-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-webkit-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-o-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-ms-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;width:0px;margin-left:0px;}
    .game.credits .parchment-left, .game.death .parchment-left, .game.banned .parchment-left, .game.about .parchment-left, .game.legal .parchment-left {left:0%;}
    .game.credits .parchment-right, .game.death .parchment-right, .game.banned .parchment-right, .game.about .parchment-right, .game.legal .parchment-right {right:0%;}

    #container {z-index:100;background:rgba(0,0,0,0.2);-moz-transition:1s opacity linear 0.5s;-webkit-transition:1s opacity linear 0.5s;-o-transition:1s opacity linear 0.5s;-ms-transition:1s opacity linear 0.5s;transition:1s opacity linear 0.5s;}
    .intro #container {opacity:0;pointer-events:none;}
    .game #container {opacity:1;}

    #logo, #parchment {-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;}

    
    @-moz-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
    @-webkit-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
    @-o-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
    @-ms-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }}
    
    @-moz-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
    @-webkit-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
    @-o-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
    @-ms-keyframes glow { from {color:#fcda5c;} to {color:#fff;} }
    
    @-moz-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
    @-webkit-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
    @-o-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
    @-ms-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }}
    @-moz-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
    @-webkit-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
    @-o-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
    @-ms-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }}
    @-moz-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
    @-webkit-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
    @-o-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
    @-ms-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }}
    
    @-moz-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }}
    @-webkit-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }}
    @-o-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }}
    @-ms-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }}
    @-moz-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }}
    @-webkit-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }}
    @-o-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }}
    @-ms-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }}

    @-moz-keyframes parchmiddle3 {
        0% {width:1038px;margin-left:-519px;background-position:-114px -1071px;}
        45% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        55% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        100% {width:1038px;margin-left:-519px;background-position: -114px -1071px;}
    }
    @-webkit-keyframes parchmiddle3 {
        0% {width:1038px;margin-left:-519px;background-position:-114px -1071px;}
        45% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        55% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        100% {width:1038px;margin-left:-519px;background-position: -114px -1071px;}
    }
    @-o-keyframes parchmiddle3 {
        0% {width:1038px;margin-left:-519px;background-position:-114px -1071px;}
        45% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        55% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        100% {width:1038px;margin-left:-519px;background-position: -114px -1071px;}
    }
    @-ms-keyframes parchmiddle3 {
        0% {width:1038px;margin-left:-519px;background-position:-114px -1071px;}
        45% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        55% {width:0px;margin-left:0px;background-position: -633px -1071px;}
        100% {width:1038px;margin-left:-519px;background-position: -114px -1071px;}
    }

    @-moz-keyframes parchmiddle2 {
        0% {width:692px;margin-left:-346px;background-position:-76px -710px;}
        45% {width:0px;margin-left:0px;background-position: -422px -710px;}
        55% {width:0px;margin-left:0px;background-position: -422px -710px;}
        100% {width:692px;margin-left:-346px;background-position:-76px -710px;}
    }
    @-webkit-keyframes parchmiddle2 {
        0% {width:692px;margin-left:-346px;background-position:-76px -710px;}
        45% {width:0px;margin-left:0px;background-position: -422px -710px;}
        55% {width:0px;margin-left:0px;background-position: -422px -710px;}
        100% {width:692px;margin-left:-346px;background-position:-76px -710px;}
    }
    @-o-keyframes parchmiddle2 {
        0% {width:692px;margin-left:-346px;background-position:-76px -710px;}
        45% {width:0px;margin-left:0px;background-position: -422px -710px;}
        55% {width:0px;margin-left:0px;background-position: -422px -710px;}
        100% {width:692px;margin-left:-346px;background-position:-76px -710px;}
    }
    @-ms-keyframes parchmiddle2 {
        0% {width:692px;margin-left:-346px;background-position:-76px -710px;}
        45% {width:0px;margin-left:0px;background-position: -422px -710px;}
        55% {width:0px;margin-left:0px;background-position: -422px -710px;}
        100% {width:692px;margin-left:-346px;background-position:-76px -710px;}
    }

    @-moz-keyframes parchmiddle1 {
        0% {width:346px;margin-left:-173px;background-position:-38px -356px;}
        45% {width:0px;margin-left:0px;background-position: -211px -356px;}
        55% {width:0px;margin-left:0px;background-position: -211px -356px;}
        100% {width:346px;margin-left:-173px;background-position:-38px -356px;}
    }
    @-webkit-keyframes parchmiddle1 {
        0% {width:346px;margin-left:-173px;background-position:-38px -356px;}
        45% {width:0px;margin-left:0px;background-position: -211px -356px;}
        55% {width:0px;margin-left:0px;background-position: -211px -356px;}
        100% {width:346px;margin-left:-173px;background-position:-38px -356px;}
    }
    @-o-keyframes parchmiddle1 {
        0% {width:346px;margin-left:-173px;background-position:-38px -356px;}
        45% {width:0px;margin-left:0px;background-position: -211px -356px;}
        55% {width:0px;margin-left:0px;background-position: -211px -356px;}
        100% {width:346px;margin-left:-173px;background-position:-38px -356px;}
    }
    @-ms-keyframes parchmiddle1 {
        0% {width:346px;margin-left:-173px;background-position:-38px -356px;}
        45% {width:0px;margin-left:0px;background-position: -211px -356px;}
        55% {width:0px;margin-left:0px;background-position: -211px -356px;}
        100% {width:346px;margin-left:-173px;background-position:-38px -356px;}
    }


    @-moz-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
    @-webkit-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
    @-o-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
    @-ms-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }}
    @-moz-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
    @-webkit-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
    @-o-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
    @-ms-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }}
    @-moz-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
    @-webkit-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
    @-o-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}
    @-ms-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }}

    @-moz-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
    @-webkit-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
    @-o-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }
    @-ms-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} }

    .home-logo {height:126px;width:246px;position:absolute;z-index:3;}
    .home-logo.nano {background-image:url('../img/3/nano.png')}
    .home-logo.banano {background-image:url('../img/3/banano.png')}
    .home-logo-sparks {display:block;position:absolute;top:0;left:0;}
    .home-logo-sparks {width:246px;height:126px;z-index:4;-moz-animation:logo3 .8s steps(6, end) infinite;-webkit-animation:logo3 .8s steps(6, end) infinite;-o-animation:logo3 .8s steps(6, end) infinite;-ms-animation:logo3 .8s steps(6, end) infinite;}
    .home-logo-sparks.nano {background-image:url('../img/3/nano.png');}
    .home-logo-sparks.banano {background-image:url('../img/3/banano.png');}

    #parchment textarea { resize: none; }
    .banned-cheating-1, .banned-cheating-365, .banned-misbehaved-1, .banned-misbehaved-365 { display: none; }
    article a { color: #4A90E2 }

    #completed.boss-check .fight-again { display: inherit; }
    #completed .fight-again { display: none; }

    #completed.boss-check h1 { margin-bottom: 0 !important; }
    #completed.boss-check p { margin-top: 0 !important; }
    #completed.boss-check .link { font-size: 24px; }

    #player-list { overflow-y: auto; }
    #player-list > div, #player-info > div { display: flex; align-items: baseline; padding: 0 12px; }
    #player-list > div:last-child,#player-info > div:last-child { padding-bottom: 6px; }
    #player-list > div span:first-of-type,#player-info > div span:first-of-type { margin-right: 3px; }
    #player-list > div span:last-of-type,#player-info > div span:last-of-type { margin-left: auto; }
    #population .active, #text-window .active, #player .active { color: #FCE045 }
    #population .party, #text-window .party, #player .party, #party .party { color: #35ee35 }
    #text-window .event { color: #55a3ff; text-shadow:0 0 8px rgba(0, 150, 255, 0.4);}

    #text-window .info, #text-window .loot { color: #bfc2db }
    #text-window .error { color: #b57979 }
    /* #text-window span {text-shadow:1px -1px 1px #000, 1px 1px 1px #000,-1px 1px 1px #000} */

    #healthbar, #hitpoints, #weapon, #armor, #skill-attack, #skill-defense { cursor: pointer;}

    #payout {
        margin-left: 50px;
        margin-right: 50px;
    }
    .overflow-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #expbar{
        border-top-left-radius: 2px;
        position: absolute;
        background-color: rgba(250,188,0,0.5);
        height: 90%;
        margin-left: 0px;
        padding: 0px;
        border: 0px;
        bottom: 8.5%;
        width: 16px;
        -webkit-box-shadow: inset 1px 1px 1px 1px #373737;
        box-shadow: inset 1px 1px 1px 1px #373737;
    }

    #expbar:hover {
        background-color: rgba(250,188,0,0.8);
    }

    #text-window {
        z-index: 100;
        overflow: hidden;
        font-family:'GraphicPixel';
        color:#e3e3e3;
        background-color:rgba(0, 0, 0, 0.43);
        position: absolute;
        bottom: 50px;
        left: 15px;
        width: 60%;
        height: 35vh;
        display: none;
    }
    
    #text-list { margin-top: 20px; height: calc(100% - 20px - 28px); overflow-y: auto;}
    #text-list > div { display: flex; padding: 0 6px; }
    #text-list > div span:first-of-type { margin-right: 6px; white-space: nowrap; }
    #minimize { position: absolute; top: 0; right: 0; }
    #chatinput { 
        width: 100%;
        padding: 4px 6px;
        height: 20px;
        border: none;
        background-color:rgba(0, 0, 0, 0.20);
    }

    .payout-icon {
        display: inline-block;
        background-size: cover;
        filter: grayscale(100%);
    }
    .payout-icon.nano {
        width: 10px;
        height: 13px;
        background-image: url(../img/3/xno.png);
    }
    .payout-icon.ban {
        width: 18px;
        height: 12px;
        margin-top: 2px;
        background-image: url(../img/3/ban.png);
    }
    .payout-icon.completed {
        display: inline-block;
        background-size: cover;
        filter: grayscale(0%);
    }

    #completedbutton {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #completedbutton:not(.completed) {
        filter: grayscale(100%);
    }

    #barbuttons {
        cursor: pointer;
    }

    .ui-widget-content {
        font-family: 'GraphicPixel' !important;
    }

    .ui-tooltip {
        min-width:220px;
        width: auto !important;
        max-width: 600px !important;
        text-align: center;
        padding: 10px 10px 15px;
        border: none !important;
        background: rgba(0,0,0,0.75) !important;
    }

    .ui-tooltip.waypoint-row {
        font-size: 0.80em!important;
        color: #74b5ff!important;
    }

    .ui-dialog {
        padding: 10px 10px 15px;
        border: none !important;
        background: none !important;
    }

    .ui-dialog-titlebar {
        color: #fff !important;
        background: #171717 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .ui-dialog .ui-button {
        background: inherit;
    }

    .ui-dialog-content.ui-widget-content {
        color: #fff;
        background: #404040 !important;
    }
    .ui-dialog-buttonpane.ui-widget-content  {
        border: none;
        margin: 0 !important;
        padding: 0 !important;
        background: #404040 !important;
    }

    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

    .resistances  span { color: #fff }
    #player-magicDamage, #player-magicResistance, .resistances .magic { color: #d16afa; }
    #player-flameDamage, #player-flameResistance, .resistances .flame { color: #fa6a09; }
    #player-lightningDamage, #player-lightningResistance, .resistances .lightning { color: #aad9fd; }
    #player-coldDamage, #player-coldResistance, .resistances .cold { color: #74b5ff; }
    #player-poisonDamage, #player-poisonResistance, .resistances .poison { color: #35ee35; }
    #player-spectralDamage, #player-spectralResistance, .resistances .spectral { color: #fff; }

    .item-tooltip-wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-height: 440px;
        max-width: 600px !important;
        align-content: flex-start;
    }
    .item-tooltip-wrapper.extended {
        width: 600px !important;
    }

    .item-tooltip-wrapper > div {
        width: 300px;
    }
    .item-title {
        font-weight: bold;
        color: #d16afa;
        margin-bottom: 6px;
    }
    .item-title.unique,
    .item-title.rune,
    .gold {
        color: #d3c59c;
    }
.item-weight {
    font-size: 0.75rem;
    color:white !important
}
   .item-unique.item-superior,
   .item-runeword.item-superior {
        box-shadow: 0 0 0 2px #e700e7;
    }

    .item-superior:not(.item-unique):not(.item-runeword){
        border-color: #e700e7 !important;
    }

    .item-unique{
        border-color: #d3c59c !important;
    }
    .item-runeword {
        border-color: #74b5ff !important;
    }
    .item-class {
        color: #fff;
        text-transform: capitalize;
        font-size: 0.80em;
        margin-bottom:6px;
    }
    .item-description {
        color: #fff;
        margin-top:1px;
    }

    .item-setdescription {
        color: #74b5ff;
        font-size: 0.75em;
    }
    .item-bonus,
    .item-set-bonus {
        color: #35ee35;
        margin-top:1px;
    }
    .item-set-name {
        color: #c6ac45;
        margin-top:3px;
    }
    .item-set-part {
        color: #9c9c9c;
        margin-top:1px;
    }
    .item-set-part.active {
        color: #eed058;
    }
    .item-set-description {
        color: #fff;
        margin-top:3px;
    }
    .item-skill {
        margin-top:3px;
        color: #74b5ff;
    }
    .item-socket {
        color: #74b5ff;
    }
    .item-description.requirement {
        color: red;
    }

    .socket-item {
        top: 6px;
        position: absolute;
        width: 100%;
    }

    .invisible {
        visibility: hidden;
    }

    .socket-item-container {
        position: relative;
    }

    .socket-container {
        display: flex;
        justify-content: center;
    }

    .socket-container div {
        margin: 0 3px;
        border: solid 2px #74b5ff;
    }

    .panel-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        right: calc(5% + 262px);
        width: 1px;
        top: 0;
        height: 94%;
        position: absolute;
    }
    .panel-container > .panel {
        position: relative;
    }

    #waypoint {top: 7%}
    #trade, #merchant { bottom: auto;}
    #upgrade { bottom: auto;}
    #inventory { bottom: auto;}

    #inventory .close { display: none; }
    #inventory .close.visible { display: block; }
    #inventory.upgrade .panel-spaced-row { display: none;}
    #item-inventory, .item-stash-page, #item-merchant { position: relative; display: flex; flex-wrap: wrap; justify-content: center;}
    .item-stash-page { display: none; }
    .item-stash-page.visible { display: flex; }
    .stash-pagination { display: flex; justify-content: center; padding-top: 6px; }
    #current-stash-page { margin: 0 6px; width: 20px; text-align: center; }
    #item-stash-previous-page, #item-stash-next-page { font-family: arial !important;}

    .ui-droppable-hover { border-color: yellow !important;}
    .ui-droppable-origin { border-color: #fff !important;}

    .item-slot { padding: 1px; border: solid 1px #2d2b29; background: #171717; }
    .item-draggable, .item-not-draggable, .item-rune {background-color: transparent; z-index:2; border-radius: 4px; border: solid 2px #928f8c; background: #171717;}
    .ui-draggable-dragging { cursor: url(../img/2/loot.png) 2 5, move; }

    .panel, label, input[type=checkbox], #settings, #store { cursor: url(../img/2/hand.png) 2 5, move; }
    .panel-header {min-height: 4px;}
    .panel-header.reverse {transform: rotate(180deg);}
    .panel-spaced-row { display: flex; justify-content: space-between; align-items: center; padding: 0 10px}
    .panel-spaced-row-top { align-items: flex-start; }
    .trade-player-name { margin-bottom: 3px;}
    .trade-player-status { margin-top: 6px;}

    .waypoint-spaced-row { display: flex; align-items: center;}
    .waypoint-spaced-row:hover:not(.disabled):not(.locked):not(.active) {background: #505050;}
    .waypoint-spaced-row.disabled, .waypoint-spaced-row.locked { color: #939494;}
    .waypoint-row { justify-content: flex-start;}
    .waypoint-row.active { color: #71c1f7;}
    .waypoint-row.disabled { color: #616161;}
    .waypoint-row.locked { color: #616161;}

    #item-player, #item-otherplayer { width: 100% }
    #item-player > div, #item-otherplayer > div { display: flex; justify-content: start;}
    #item-otherplayer .item-slot > div { position: relative; z-index: 2;}
    .item-weapon-slot, .item-armor-slot, .item-ring1-slot, .item-ring2-slot, .item-amulet-slot, .item-belt-slot, .item-helm-slot, .item-cape-slot, .item-pet-slot, .item-shield-slot {padding-right: 6px;padding-bottom: 6px;}
    .item-delete-slot { margin-left: auto; }
    .item-delete-slot > .item-slot { -webkit-box-shadow: inset 0px 0px 10px 6px #9e0000; box-shadow: inset 0px 0px 10px 6px #9e0000; }
    .item-quantity::after {
        content: attr(data-quantity);
        position: absolute;
        bottom: 1px;
        left: 2px;
        line-height: 1;
        font-size: 0.9em;
    }

    #upgrade-scroll, #trade-player1-item, #trade-player2-item {display: flex; flex-wrap: wrap;}
    #trade-info,
    #upgrade-info {
        color: #ababa4;
        font-size: 0.75em;
        height: 2.2em;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
    }

    #upgrade-info.warning {
        color: #c6ac45;
        height: 3.2em;
    }

    .item-equip-weapon, .item-equip-armor, .item-equip-ring, .item-equip-amulet, .item-equip-belt, .item-equip-helm, .item-equip-cape, .item-equip-pet, .item-equip-shield, .item-delete { position: relative; }
    .item-equip-weapon::before, .item-equip-armor::before, .item-equip-ring::before, .item-equip-amulet::before, .item-equip-belt::before, .item-equip-shield::before, .item-equip-helm::before, .item-equip-cape::before, .item-equip-pet::before, .item-delete::before {
        content: "";
        position: absolute;
        filter: grayscale(100%);
        opacity: 0.35;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
    .item-faded { opacity: 0.25; }

    .btn {
        cursor: url(../img/2/hand.png) 2 5, move;
        border: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color: #6d211d;
        text-shadow: 0 2px 0 #D37370;
        font-family:'GraphicPixel';
        font-weight: bold;
        font-size: 15px;
        padding: 6px 22px 6px;
        background-color: #C74640;
        -webkit-box-shadow: inset -2px 2px 0 2px #d2726f, inset 2px -2px 0 2px #8c2a25, inset -1px 1px 0 4px #db8f8d;
        -moz-box-shadow: inset -2px 2px 0 2px #d2726f, inset 2px -2px 0 2px #8c2a25, inset -1px 1px 0 4px #db8f8d;
        box-shadow: inset -2px 2px 0 2px #d2726f, inset 2px -2px 0 2px #8c2a25, inset -1px 1px 0 4px #db8f8d;
        text-decoration: none;
        text-align: center;
    }
    .btn.small { color: #fff; font-size: 13px; padding: 4px 8px 4px; }
    .btn:hover {
        -webkit-box-shadow:inset 2px -2px 0 2px #d2726f, inset -2px 2px 0 2px #8c2a25, inset 1px -1px 0 4px #db8f8d;
        -moz-box-shadow: inset 2px -2px 0 2px #d2726f, inset -2px 2px 0 2px #8c2a25, inset 1px -1px 0 4px #db8f8d;
        box-shadow: inset 2px -2px 0 2px #d2726f, inset -2px 2px 0 2px #8c2a25, inset 1px -1px 0 4px #db8f8d;
    }
    .btn.disabled {
        opacity: 0.8;
        box-shadow: none;
        text-shadow: none;
    }

    .btn-default {
        color: #2e2e2e !important;
        background-color: #dcdcdc;
        text-shadow: 0 2px 0 #d2d2d2;
        box-shadow: inset -2px 2px 0 2px #c7c7c7, inset 2px -2px 0 2px #868585, inset -1px 1px 0 4px #dbdada;
    }

    .btn-default:hover:not(.disabled) {
        box-shadow: inset 2px -2px 0 2px #c7c7c7, inset -2px 2px 0 2px #868585, inset 1px -1px 0 4px #dbdada;
    }

    .arial-font {font-family:arial, sans-serif;}

    #container-payout-hash {
        display: none;
    }

    #stash {
        position: absolute;
        right: 20px;
    }

    .item-upgrade-success-slot {
        -moz-box-shadow:    inset 0 0 10px rgba(252,255,1,0.75);
        -webkit-box-shadow: inset 0 0 10px rgba(252,255,1,0.75);
        box-shadow:         inset 0 0 10px rgba(252,255,1,0.75);
    }
    .item-upgrade-fail-slot {
        animation-iteration-count: 1;
        animation: failed-upgrade 1s;
        -moz-box-shadow:    inset 0 0 10px #C74640;
        -webkit-box-shadow: inset 0 0 10px #C74640;
        box-shadow:         inset 0 0 10px #C74640;
    }

    @keyframes failed-upgrade {
        from {
            -moz-box-shadow:    inset 0 0 50px #C74640;
            -webkit-box-shadow: inset 0 0 50px #C74640;
            box-shadow:         inset 0 0 50px #C74640;
        }
        to {
            -moz-box-shadow:    inset 0 0 10px #C74640;
            -webkit-box-shadow: inset 0 0 10px #C74640;
            box-shadow:         inset 0 0 10px #C74640;
        }
    }

    #countdown {
        position: absolute;
        top: -30px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 20px;
        font-family:'GraphicPixel';
        color: #fff;
        text-shadow: 0px 1px #000;
    }

    .login-play-button.play.loading img {
        display: block;
        position: absolute;
        top: 54%;
        left: 50%;
    }

    .ui-slider-handle {
        cursor: inherit !important;
        text-align: center;
        width: auto !important;
        padding: 0px 4px;
    }

    .setting {margin: 3px 0}

    .prevent-click {
        pointer-events: none;
    }

    .hidden { display: none; }
    .flex-50 {display: flex; flex-wrap: wrap; }
    .flex-50 > div { width: 50%; display: flex; justify-content: space-between;}
    .flex-50 > div:nth-child(odd) span:nth-child(2) { margin-right:6px; }

    small {
        font-size: 0.8em;
    }

    #player-account-link { text-decoration: none; margin-top: 6px; display: inline-block;}

    /* .account-wrapper { position: relative; display: flex; align-items: center; justify-content: center; }
    /* #accountinput {  visibility: hidden; } */
    #accountinput, #have-account { display: none; }
    #accountinput.visible, #have-account.visible { display: inline-block; }
    /* #have-account { width: 100%; text-align: center; position: absolute; }  */

    .bottom-links {
        margin-bottom: 60px;
    }

    #parchment.loadcharacter #loadcharacter,
    #parchment.enterpassword #enterpassword,
    #parchment.createcharacter #createcharacter {
        height:100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .account-input-wrapper {
        display: flex;
        justify-content: center;
    }

    .account-input-wrapper .btn {
        margin-left: 10px;
    }

    @media screen and (min-width: 1501px) {
        .home-logo {margin-left:-240px;}
        #text-list { height: calc(100% - 20px - 32px); }
        #text-list > div { padding: 0 12px; }

        #text-list a{ color:#fff }
        #chatinput { padding: 6px 12px; }
        #completed.boss-check .link { font-size: 34px; }
        .createaccount-instructions { font-size: 25px; }
        #upgrade-scroll, #trade-player1-item, #trade-player2-item { width: 168px; }
        .panel-spaced-row { padding: 0 10px}
        #upgrade .panel-spaced-row { padding: 0 14px}
        .item-equip-weapon::before {background-image: url('../img/3/inventory-placeholder.png');}
        .item-equip-armor::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -45px;}
        .item-equip-ring::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -93px;}
        .item-equip-amulet::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -237px;}
        .item-equip-belt::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -192px;}
        .item-equip-cape::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -285px;}
        .item-equip-pet::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -429px;}
        .item-equip-shield::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -330px;}
        .item-equip-helm::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -381px;}
        .item-delete::before {background-image: url('../img/3/inventory-placeholder.png');background-position-x: -141px;}
        #player-list {max-height: 366px;}
        .btn {font-size:18px;}
        #fight-again {font-size:26px;}
        #completed.boss-check p {line-height:1.5em;}
        #stash {top: 88px;}
        .bottom-links {
            margin-bottom: 80px;
        }

        #waypoint {height:466px;}
        #waypoint .waypoint-icon {width:69px; height: 69px; background-image: url('../img/3/waypoint.png'); transform: scale(0.65);margin: -8px 0}
        #waypoint .waypoint-text { font-size: 20px; }
        .waypoint-row.active .waypoint-icon {background-position-x: -69px;}
        .waypoint-row.locked .waypoint-icon {background-position-x: -138px;}
        .waypoint-spaced-row {margin: 0 10px; border-bottom: solid 3px #373737;}
        .waypoint-spaced-row:first-child {border-top: solid 3px #373737;}
        .playerimage { height: 96px; width: 96px; }
        .login-play-button.play.loading img {
            margin-top: -16px;
            margin-left: -16px;
            height: 32px;
            width: 32px;
        }
        .setting {font-size:20px;}

	    .upscaled #logo, .upscaled #logosparks, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #respawn, .upscaled #scroll, .upscaled #instructions, .upscaled #store, .upscaled #settings, .upscaled #party, .upscaled #completed, .upscaled #missing-account, .upscaled #failed, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .discord, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/3/spritesheet.png');}
	    
	    .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #minimize, .upscaled .panel > div{background-image:url('../img/3/barsheet.png');}
	    .upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/3/achievements.png');}
        .upscaled .item-gem, .upscaled .item-potion {background-image:url('../img/3/achievements-unlocks.png');}
	    
	    
        body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood2.png') no-repeat 1587px 138px, url('../img/1/wood2.png') no-repeat 51px 519px, url('../img/1/wood3.png') no-repeat 228px 219px, url('../img/1/wood.png') repeat, #000; background-size:auto, 15px auto, 15px auto, 60px auto, 384px;}
        body {background:-webkit-gradient(radial, center center, 360, center center, 1200, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/3/wood2.png') no-repeat 1587px 138px, url('../img/3/wood2.png') no-repeat 51px 519px, url('../img/3/wood3.png') no-repeat 228px 219px, url('../img/3/wood.png') repeat, #000; background-size:auto, 15px auto, 15px auto, 60px auto, 384px;}
        #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, #store, #settings, #party, #completed, #missing-account, #failed, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:1266px auto;}
        #logo {height:126px;width:687px;position:absolute;top:42px;left:50%;margin-left:-244px;z-index:3;}
        #logosparks {width:687px;height:126px;z-index:4;-moz-animation:logo3 .8s steps(6, end) infinite;-webkit-animation:logo3 .8s steps(6, end) infinite;-o-animation:logo3 .8s steps(6, end) infinite;-ms-animation:logo3 .8s steps(6, end) infinite;}
        #parchment, #loadcharacter, #banned, #createaccount, #createpassword, #enterpassword, #invalidconnection, #confirmation, #error, #legal {width:1266px;height:596px;position:absolute;top:55%;left:50%;margin-left:-633px;margin-top:-318px;font-size:30px;text-align:center;z-index:2;}
        #parchment h1 {margin-top:60px;font-weight:normal;margin-bottom:20px;}
        .left-ornament, .right-ornament {height:36px;width:93px;display:inline-block;margin:0 20px;position:relative;top:12px;}
        .left-ornament {background-position:-1062px 0;}
        .right-ornament {background-position:-1155px 0;}
        #character {height:63px;width:36px;margin:0 auto;background-position:-1062px -36px;margin-top:45px;position:relative;}
        #character div {height:63px;width:36px;position:absolute;top:0;left:0;background-position:-1098px -36px;opacity:1;}
        #character.disabled div {opacity:0;pointer-events:none;}
        #parchment input,
        #parchment textarea,
        #store input,
        .account-container input {margin-top:30px; padding:0 15px; border:3px dashed #b2af9b; font-size:30px;border-radius:9px;height:61px;color:#eee;}
        .account-container input { margin-top: 0; font-size: 20px; height: 40px; }
        #parchment textarea { height: 88px; padding-top: 10px; }
        #parchment.createcharacter input {margin-top:20px;height:50px;}
        #createcharacter .play {margin: 10px auto 0 auto;}
        .button {height:153px;width:375px;background-position:-687px -306px;margin:30px auto 0 auto;position:relative;}
        .play div {height:153px;width:375px;background-position:-687px 0px;}
        .play div:active {background-position:-687px -459px;}
        .play.loading div {background-position:-687px -612px;}
        .play.loading img {width:24px;height:24px;}
        .stroke, .achievement-name {text-shadow:3px 3px 0 #373737, 3px -3px 0 #373737, 0 3px 0 #373737, 3px 0 0 #373737, -3px 3px 0 #373737, -3px -3px 0 #373737, 0 -3px 0 #373737, 0 3px 0 #373737, -3px 0 0 #373737;}
        #player-account-input.stroke {text-shadow:2px 2px 0 #373737, 2px -2px 0 #373737, 0 2px 0 #373737, 2px 0 0 #373737, -2px 2px 0 #373737, -2px -2px 0 #373737, 0 -2px 0 #373737, 0 2px 0 #373737, -2px 0 0 #373737;}

        #loadcharacter h1, #banned h1, #createaccount h1, #createpassword h1, #enterpassword h1, #invalidconnection h1, #confirmation h1, #error h1, #legal h1 {margin-top:30px;}
        .loadcharacter .play, .createpassword .play, .confirmation .delete {margin:15px auto 0 auto;}
        #confirmation p, #error p {font-size:30px;margin-top:60px;line-height:40px;}
        #legal p {margin:50px auto 0;}
        #error p {width:70%;margin:60px auto 0;}
        .button.delete {background-position:-687px -153px;}
        .button.delete:active {background-position:0 -2178px;}
        .validation-error {font-size:22px;}
        
		#container {width:1470px;margin:0 auto;position:absolute;top:50%;margin-top:-378px;left:50%;margin-left:-735px;}

        #canvasborder {padding:15px;background:url('../img/3/border.png') no-repeat;}
        #expbar{right:15px}
		#canvas {width:100%;height:672px;}
		#fade {width:1440px;height:672px;top:15px;left:15px;}
		
		#instructions, #store, #settings, #party, #completed, #missing-account, #failed {height:579px;width:1251px;background-position:0 -1704px;margin-left:-624px;margin-top:-312px;color:#373737;}
		#instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {font-size:40px;text-align:center;margin:50px 0 40px;}
        #party h1 { margin-bottom: 20px; margin-top: 30px; }
        #party .party-panel { height: 450px; }
        #instructions ul {font-size:30px;margin-top:30px;}
        #instructions ul li {margin:0 0; clear:left;}
        #instructions ul li span {display:block;float:left;position: relative;}
        #instructions li:nth-child(1) span {height:87px;width:45px;background-position:-1134px -36px; margin: 0 30px -8px 60px;top: -39px;}
        #instructions li:nth-child(2) span {height:48px;width:39px;background-position:-1179px -36px; margin: 0 36px 28px 60px;top: -9px;}
        #instructions li:nth-child(3) span {height:63px;width:48px;background-position:-1218px -36px; margin: 0 27px 14px 60px;top: -18px;}
        #instructions li:nth-child(4) span {height:84px;width:53px;background:url('../img/2/anvil.png') no-repeat; margin: 0 30px 0 52px;top: -32px;}
        #instructions p, #completed p, #missing-account p, #failed p {text-align:center;font-family:'GraphicPixel';font-size:20px;clear:left;margin-top:50px;}
        #failed p { font-size: 30px; }
        #completed p, #missing-account p { margin-top:10px; font-size: 24px; }
        
        #player-image {height: 96px; width: 96px;}
        
        .close {height:48px;width:48px;top:-12px;right:-15px;background-position:-1062px -378px;}
        .close:hover {background-position:-1110px -378px;}
        .close:active {background-position:-1158px -378px;}
     
        .ribbon {width:54px;right:30px;top:12px;}
        .ribbon .top {width:100%;height:18px;background-position:-1143px -516px;}
        .ribbon .bottom {width:100%;height:66px;background-position:-1143px -555px;}
        .ribbon:hover .top {height:30px;}
        .ribbon:hover .bottom {background-position:-1197px -555px;}
        #createcharacter .ribbon {right:30px;top:12px;}
        #loadcharacter .ribbon {right:148px;top:-13px;}
        
        /*Death & Respawn*/
        #death p {font-size:30px;}
        #death > p {margin-top:140px;}
        #death p em {margin-top:50px;}
		#respawn {width:375px;height:153px;margin:60px auto 0 auto;background-position: 0 -896px;}
		#respawn:active {background-position:-375px -896px;}
		
		
		/*Bubbles*/
		#bubbles {width:1440px;height:672px;margin-bottom:-672px;position:relative;top:-672px;pointer-events:none;}
		p {font-size:12px;margin:0;padding:12px 0}
	    .bubble p {font-family:"GraphicPixel"; font-size:18px;line-height:24px;}
	    
	    /*GUI Bar*/
	    #bar-container {height:51px;top:-3px;background-size:1440px;}

		#healthbar {height:39px;background-position:0 -51px;width:306px;top:9px;background-size:1440px;z-index:20;}
		#hitpoints {width:0px;height:33px;top:12px;left:33px;z-index:10;position:absolute;}
		#hpguide {left: 33px; top: 12px; width: 2px; height: 33px; z-index: 30; }

        .item-slot { width:52px; height:52px; }
        #armor, #weapon, #skill-attack, #skill-defense, .item-draggable, .item-not-draggable, .item-rune {width:48px;height:48px;background-size:288px;background-position:-48px;}
        .item-rune { width: 46px; height: 46px; border-radius: 23px; }
        #armor, #weapon, #skill-attack, #skill-defense {position:absolute;}
        #weapon {left:312px;top:3px;background-size:288px;}
        #armor {left:363px;top:3px;}
        #skill-attack {left:420px;top:6px;}
        #skill-defense {left:471px;top:6px;}


        #notifications {width: 516px;margin-left: -200px;font-size: 17px;color:#eee;top:6px;height:45px;}
        #notifications div.top {top:-45px;}
        #notifications span {line-height:45px;height:45px;}

        #player-count {font-size:20px;left:1042px;top:18px;width:168px;text-align:center;}
        .panel {width:360px;bottom:66px;font-size:20px;line-height:30px;}
        .panel-container {right: calc(5% + 360px);}
        #population {right:105px;}
        #player {left: 20px;}
        #waypoint {left: 20px;}

        .panel > div {background-size:1440px;background-position:-720px -156px;}
        .panel-header {background-size:1440px; background-position:-720px -144px !important;padding-top: 12px;}
        .panel.panel-large > div {background-position:0 -207px;}
        .panel-large .panel-header {background-position:0 -195px !important;}

        #trade, #merchant { width:416px; right: 56px; }
        .barbutton {background-size:1440px;height:45px;width:42px;}
        #chatbutton {background-position:-306px -51px;top:3px;left:1215px;}
        #chatbutton:hover, #chatbutton.blink:hover {background-position:-348px -51px;}
        #chatbutton.blink {background-position:-906px -51px;}
        #chatbutton.active {background-position:-390px -51px;}
        #achievementsbutton {background-position:-432px -51px;top:3px;left:1260px;}
        #achievementsbutton:hover, #achievementsbutton.blink:hover {background-position:-474px -51px;}
        #achievementsbutton.blink {background-position:-864px -51px;}
        #achievementsbutton.active {background-position:-516px -51px;}
        #completedbutton {background-position:-1002px -51px;top:3px;left:1305px;width:42px;}
        #completedbutton:hover {background-position:-1044px -51px;}
        #completedbutton.active {background-position:-1086px -51px;}
        #settings-button {background-position:-1128px -51px;top:3px;left:1395px;}
        #settings-button:hover {background-position:-1170px -51px;}
        #settings-button.active {background-position:-1212px -51px;}
        #completedbutton.ban {background-position:-1254px -51px;}
        #completedbutton.ban:hover {background-position:-1296px -51px;}
        #completedbutton.ban.active {background-position:-1338px -51px;}
        #party-button {background-position: -1212px -96px;top: 3px;left: 1350px;}
        #party-button:hover {background-position:-1254px -96px;}
        #party-button.blink {background-position:-1296px -96px;}
        #party-button.active {background-position:-1338px -96px;}
        
        #chatbox {height:48px;width:1182px;background-size:1440px;background-position:0 -96px;margin-left:-591px;bottom:18px;}
        #chatbox.active {bottom:66px;}
		#chatbox input {font-size:20px;background:none;width:90%;border:0;margin-left:2%;padding:16px 0;}

        #minimize {height:27px;width:27px;background-position:-948px -51px;}
        #minimize:hover {background-position:-975px -51px;}
		
		/*Credits*/
        #credits, #death, #banned, #about {width:1266px;height:596px;margin-left:-633px;margin-top:-318px;font-size:30px;}
        .parchment-left, .parchment-right, .parchment-middle {background-size:1266px;}
        .parchment-left {width:114px;height:594px;background-position:0 -1071px;}
        .parchment-right {width:114px;height:594px;background-position:-1152px -1071px;}
        .parchment-middle {height:594px;background-position:-114px -1071px;width:1038px;margin-left:-519px;}
        
        #credits h1, #about h1 {margin-top:35px;font-weight:normal;}
        #credits h1 a {font-size:36px;}
        .game #credits h1, .game #about h1 {margin-top:52px;}
        #credits h1 span.title {max-width:300px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;top:36px;}
        #authors {clear:both;margin-top:100px;}
        #guillaume, #franck {width:47%;line-height:36px;}
        #guillaume {float:left;text-align:right;}
        #franck {float:right;text-align:left;}
        .avatar {height:75px;width:39px;}
        #guillaume .avatar {float:right;background-position:-1062px -303px;margin-left:60px;}
        #franck .avatar {float:left;background-position:-1101px -303px;margin-right:60px;}
        #seb {margin:270px auto 0 auto;width:54%;color:#373737;font-size:25px;}
        #seb a {color:#373737;text-decoration:none;}
        #seb a:hover {color:#397cd8;}
        #note {float:left;background-position:-1203px -336px;height:33px;width:30px;}
        #close-credits {margin:45px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;}
        #sharing {width:240px;}
        
        /*About*/
        #about h1 span.title {max-width:500px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;}
        #close-about {margin:230px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;}
        #about #game-desc {font-size:28px;text-align:center;max-width:70%;margin:30px auto;line-height:34px;}
        #about .left p, #about .right p {font-size:20px;text-align:left;line-height:26px;padding:0;margin-top:-10px;}
        #about .left {width:31%;float:left;margin-left:12%;}
        #about .right {width:37%;float:right;margin-right:12%;}
        #about .left .img {height:90px;width:81px;float:left;background-position:-1062px -516px;margin-right:20px;}
        #about .right .img {height:90px;width:168px;float:left;background-position:-1062px -426px;margin-right:20px;}
        #about .link {clear:both;font-size:20px;margin:30px 0;display:block;text-align:left;line-height:16px;}
        #about .link a {color:#2e7fdd;text-decoration:none;}
        #about .link .ext-link {height:18px;width:18px;background-position:-1197px -516px;display:block;float:left;margin-right:10px;}
        
        .animate .parchment-middle {-moz-animation:parchmiddle3 1s ease 1;-webkit-animation:parchmiddle3 1s ease 1;-o-animation:parchmiddle3 1s ease 1;-ms-animation:parchmiddle3 1s ease 1;}

        .game .parchment-middle {background-position: -633px -1071px;}
        .game.credits .parchment-middle, .game.death .parchment-middle, .game.banned .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:1038px;margin-left:-519px;background-position: -114px -1071px;}
        
	    footer {font-size:20px;}
        #resize-check {height:3px;}
	}

	@media screen and (max-width: 1500px), screen and (max-height: 870px) {
        .home-logo {margin-left:-200px;margin-top:-20px;transform:scale(0.7);}
        .createaccount-instructions { font-size: 17px; }
        #upgrade-scroll, #trade-player1-item, #trade-player2-item { width: 120px; }
        .item-equip-weapon::before {background-image: url('../img/2/inventory-placeholder.png');}
        .item-equip-armor::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -29px;}
        .item-equip-ring::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -61px;}
        .item-equip-amulet::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -157px;}
        .item-equip-belt::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -126px;}
        .item-equip-cape::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -189px;}
        .item-equip-pet::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -285px;}
        .item-equip-shield::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -218px;}
        .item-equip-helm::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -253px;}
        .item-delete::before {background-image: url('../img/2/inventory-placeholder.png');background-position-x: -93px;}
        #player-list {max-height: 266px;}
        .btn {font-size:16px;}
        #completed.boss-check p {line-height:1.35em;}
        #stash {top:45px;}

        #waypoint {height:312px;}
        #waypoint .waypoint-icon {width:46px; height: 46px; background-image: url('../img/2/waypoint.png'); transform: scale(0.65); margin: -5px 0}
        #waypoint .waypoint-text { font-size: 16px; }
        .waypoint-row.active .waypoint-icon {background-position-x: -46px;}
        .waypoint-row.locked .waypoint-icon {background-position-x: -92px;}
        .waypoint-spaced-row {margin: 0 10px; border-bottom: solid 2px #373737;}
        .waypoint-spaced-row:first-child {border-top: solid 2px #373737;}
        .playerimage { height: 64px; width: 64px; }
        .play.loading img {
            margin-top: -12px;
            margin-left: -12px;
            height: 24px;
            width: 24px;
        }

	    .upscaled #logo, .upscaled #logosparks, .upscaled .left-ornament, .upscaled .right-ornament, .upscaled #character, .upscaled #character div, .upscaled .button, .upscaled .button div, .upscaled #respawn, .upscaled #scroll, .upscaled #instructions, .upscaled #store, .upscaled #settings, .upscaled #party, .upscaled #completed, .upscaled #missing-account, .upscaled #failed, .upscaled .icon, .upscaled #tilt, .upscaled .parchment-left, .upscaled .parchment-middle, .upscaled .parchment-right, .upscaled .avatar, .upscaled .facebook, .upscaled .twitter, .upscaled .discord, .upscaled .close, .upscaled .ribbon .top, .upscaled .ribbon .bottom, .upscaled #about .img, .upscaled .ext-link {background-image:url('../img/2/spritesheet.png');}
	    .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #minimize, .upscaled .panel > div{background-image:url('../img/2/barsheet.png');}
	    .upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background-image:url('../img/2/achievements.png');}
        .upscaled .item-gem, .upscaled .item-potion {background-image:url('../img/2/achievements-unlocks.png');}

        body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/2/wood.png') repeat, #000; background-size:auto, 256px;}        
        body {background:-webkit-gradient(radial, center center, 240, center center, 800, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/2/wood.png') repeat, #000; background-size:auto, 256px;}
        #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, #store, #settings, #party, #completed, #missing-account, #failed, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:844px auto;}
        #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-179px;z-index:3;}
        #logosparks {width:458px;height:84px;z-index:4;-moz-animation:logo2 .8s steps(6, end) infinite;-webkit-animation:logo2 .8s steps(6, end) infinite;-o-animation:logo2 .8s steps(6, end) infinite;-ms-animation:logo2 .8s steps(6, end) infinite;}
        #parchment, #loadcharacter, #banned, #createaccount, #createpassword, #enterpassword, #invalidconnection, #confirmation, #error, #legal {width:844px;height:400px;position:absolute;top:55%;left:50%;margin-left:-422px;margin-top:-220px;font-size:20px;text-align:center; z-index:2;}
        #parchment h1 {margin-top:40px;font-weight:normal;}
        .left-ornament, .right-ornament {height:24px;width:62px;display:inline-block;margin:0 15px;position:relative;top:7px;}
        .left-ornament {background-position:-708px 0;}
        .right-ornament {background-position:-770px 0;}
        #character {height:42px;width:24px;margin:0 auto;background-position:-708px -24px;margin-top:30px;position:relative;}
        #character div {height:42px;width:24px;position:absolute;top:0;left:0;background-position:-732px -24px;opacity:1;}
        #character.disabled div {opacity:0;pointer-events:none;}
        #parchment input,
        #parchment textarea,
        #store input,
        .account-container input {margin-top:20px; padding:0 10px; border:2px dashed #b2af9b; font-size:20px;border-radius:6px;height:41px;color:#eee;}
        #parchment textarea { height: 64px; padding-top: 10px; }
        #parchment.createcharacter input {margin-top:15px;height:30px;}
        #createcharacter .play {margin: 10px auto 0 auto;}
        .button {height:102px;width:250px;background-position:-458px -204px;margin:10px auto 0 auto;position:relative;}
        .play div {height:102px;width:250px;background-position:-458px 0px;}
        .play div:active {background-position:-458px -306px;}
        .play.loading div {background-position:-458px -408px;}
        #login-play-link.play.loading img {height:16px;width:16px;}
        .stroke, .achievement-name {text-shadow:2px 2px 0 #373737, 2px -2px 0 #373737, 0 2px 0 #373737, 2px 0 0 #373737, -2px 2px 0 #373737, -2px -2px 0 #373737, 0 -2px 0 #373737, 0 2px 0 #373737, -2px 0 0 #373737;}
        
        #loadcharacter h1, #banned h1, #createaccount h1, #createpassword h1, #enterpassword h1, #invalidconnection h1, #confirmation h1, #error h1, #legal h1 {margin-top: 30px; margin-bottom: 10px;}
        .loadcharacter .play, .createpassword .play, .confirmation .delete {margin:6px auto 0 auto;}
        #confirmation p, #error p {font-size:20px;margin-top:40px;line-height:30px;}
        #legal p {margin:30px auto 0;font-size:16px;line-height:24px;}
        #error p {width:70%;margin:40px auto 0;}
        .button.delete {background-position:-458px -102px;}
        .button.delete:active {background-position:0 -1452px;}
        .validation-error {font-size:16px;}
        
        #container {width:980px;margin:0 auto;position:absolute;top:50%;margin-top:-252px;left:50%;margin-left:-490px;}

        #canvasborder {padding:10px;background:url('../img/2/border.png') no-repeat;}
        #expbar{right:10px}
        #canvas {width:100%;height:448px;}
        #fade {width:960px;height:448px;top:10px;left:10px;}

        #instructions, #store, #settings, #party, #completed, #missing-account, #failed {height:386px;width:834px;background-position:0 -1136px;margin-left:-416px;margin-top:-210px;color:#373737;}
        #instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {font-size:30px;text-align:center;margin:40px 0 30px;}
        #settings h1 { margin-bottom: 0; margin-top: 30px; }
        .setting { font-size: 16px; }
        .account-container { margin-top: 10px;}
        .account-container input { margin-top: 0; font-size: 18px; height: 36px; width: 80%; }
        #party h1 { margin-bottom: 10px; margin-top: 20px; }
        #party .party-panel { height: 300px; }
        #completed h1 { margin-bottom: 0}
        #instructions ul {font-size:20px;margin-top:20px;}
        #instructions ul li {margin:20px 0; clear:left;}
        #instructions ul li span {display:block;float:left;position: relative;}
        #instructions li:nth-child(1) span {height:58px;width:30px;background-position:-756px -24px;margin: 0 20px 0 40px;top: -26px;}
        #instructions li:nth-child(2) span {height:32px;width:26px;background-position:-786px -24px;margin: 0 24px 24px 40px;top: -6px;}
        #instructions li:nth-child(3) span {height:42px;width:32px;background-position:-812px -24px;margin: 0 18px 16px 40px;top: -12px;}
        #instructions li:nth-child(4) span {height:64px;width:40px;background:url('../img/1/anvil.png') no-repeat;background-size: cover;margin: 0 17px 0 34px;top: -30px;}
        #instructions p, #completed p, #missing-account p, #failed p {text-align:center;font-family:'GraphicPixel';font-size:18px;clear:left;margin-top:20px;}
        #container #completed p { margin-top:5px; font-size:16px; }

        #player-image {height: 64px; width: 64px;}
        
        .close {height:32px;width:32px;top:-8px;right:-10px;background-position:-708px -252px;}
        .close:hover {background-position:-740px -252px;}
        .close:active {background-position:-772px -252px;}
        
        .ribbon {width:36px;right:20px;top:8px;}
        .ribbon .top {width:100%;height:12px;background-position:-762px -344px;}
        .ribbon .bottom {width:100%;height:44px;background-position:-762px -370px;}
        .ribbon:hover .top {height:20px;}
        .ribbon:hover .bottom {background-position:-798px -370px;}
        #createcharacter .ribbon {right:20px;top:8px;}
        #loadcharacter .ribbon {right:99px;top:-8px;}
        
        #close-legal {font-size:14px;margin-top:30px;}
        
        /*Death & Respawn*/
        #death p {font-size:20px;}
        #death > p {margin-top:90px;}
        #death p em {margin-top:30px;}
		/* #respawn {width:250px;height:102px;margin:40px auto 0 auto;background-position: 0 -598px;} */
        #respawn {
            background-position: 0px -607px;
            background-size: 844px auto;
            width: 251px;
            height: 94px;
        }
		#respawn:active {background-position:-250px -607px;}
		
		/*Bubbles*/
		#bubbles {width:960px;height:448px;margin-bottom:-448px;position:relative;top:-448px;pointer-events:none;}
		p {font-size:12px;margin:0;padding:5px 0;line-height:1.5;}
	    .bubble p {font-family:"GraphicPixel"; font-size:14px;}
	    
	    /*GUI Bar*/
		#bar-container {height:34px;top:-2px;background-size:960px;}

		#healthbar {height:26px;background-position:0 -34px;width:204px;top:6px;background-size:960px;z-index:20;}
		#hitpoints {width:0px;height:22px;top:8px;left:22px;z-index:10;position:absolute;}
		#hpguide {left: 22px; top: 8px; width: 2px; height: 22px; z-index: 30; }

        .item-slot { width:36px; height: 36px; }
        #armor, #weapon, #skill-attack, #skill-defense, .item-draggable, .item-not-draggable, .item-rune {width:32px;height:32px;background-size:192px;background-position:-32px;}
        .item-rune { width: 30px; height: 30px; border-radius: 15px; }
        #armor, #weapon, #skill-attack, #skill-defense { position:absolute; }
        #weapon {left:208px;top:2px;}
        #armor {left:242px;top:2px;}
        #skill-attack {left:278px;top:4px;}
        #skill-defense {left:312px;top:4px;}

        #notifications {width: 330px;margin-left:-134px;font-size:14px;color:#eee;top:2px;height:30px;}
        #notifications div.top {top:-30px;}
        #notifications span {line-height:30px;height:30px;}
        .windows #notifications span {line-height:34px;}

        #player-count {font-size:16px;left:680px;top:10px;width:125px;text-align:center;}
        .panel {bottom:44px;width:262px;font-size:14px;line-height:20px;}
        .panel.panel-large { width: 302px; }
        .panel-container {right: calc(5% + 262px);}
        #population {right:70px;}
        #player {left: 20px;}
        #waypoint {left: 20px;}

        .panel > div {background-size:960px;background-position:-480px -104px;}
        .panel-header {background-position:-480px -96px !important;padding-top: 8px;}
        .panel.panel-large > div {background-position:0 -138px;}
        .panel-large .panel-header {background-position:0 -130px !important;}

        #trade, #merchant { right: 40px; width: 302px}
        .barbutton {background-size:960px;height:30px;width:28px;}
        #chatbutton {background-position:-204px -34px;top:2px;left:810px;}
        #chatbutton:hover, #chatbutton.blink:hover {background-position:-232px -34px;}
        #chatbutton.blink {background-position:-604px -34px;}
        #chatbutton.active {background-position:-260px -34px;}
        #achievementsbutton {background-position:-288px -34px;top:2px;left:840px;}
        #achievementsbutton:hover, #achievementsbutton.blink:hover {background-position:-316px -34px;}
        #achievementsbutton.blink {background-position:-576px -34px;}
        #achievementsbutton.active {background-position:-344px -34px;}
        #completedbutton {background-position:-668px -34px;top:2px;left:870px;width:28px;}
        #completedbutton:hover {background-position:-696px -34px;}
        #completedbutton.active {background-position:-724px -34px;}
        #settings-button {background-position:-752px -34px;top:2px;left:930px;}
        #settings-button:hover {background-position:-780px -34px;}
        #settings-button.active {background-position:-808px -34px;}
        #completedbutton.ban {background-position:-836px -34px;}
        #completedbutton.ban:hover {background-position:-864px -34px;}
        #completedbutton.ban.active {background-position:-892px -34px;}
        #party-button {background-position:-808px -64px;top:2px;left:900px;}
        #party-button:hover {background-position:-836px -64px;}
        #party-button.blink {background-position:-864px -64px;}
        #party-button.active {background-position:-892px -64px;}

		#chatbox {height:32px;width:788px;background-size:960px;background-position:0 -64px;margin-left:-394px;bottom:12px;}
		#chatbox.active {bottom:44px;}
		#chatbox input {font-size:14px;background:none;width:90%;border:0;margin-left:2%;padding:8px 0;}

        #minimize {height:18px;width:18px;background-position:-632px -34px;}
        #minimize:hover {background-position:-650px -34px;}
		
		/*Credits*/
        #credits, #death, #banned, #about {width:844px;height:400px;margin-left:-422px;margin-top:-220px;font-size:20px;}
        .parchment-left, .parchment-right, .parchment-middle {background-size:844px;}
        .parchment-left {width:76px;height:398px;background-position:0 -710px;}
        .parchment-right {width:76px;height:398px;background-position:-768px -710px;}
        .parchment-middle {height:398px;background-position:-76px -710px;width:692px;margin-left:-346px;}

        #credits h1, #about h1 {margin-top:25px;font-weight:normal;}
        #credits h1 a {font-size:24px;}
        .game #credits h1, .game #about h1 {margin-top:60px;}
        #credits h1 span.title {max-width:200px;display:inline-block;line-height:26px;margin-top:-60px;position:relative;top:24px;}
        #authors {clear:both;margin-top:70px;}
        #guillaume, #franck {width:47%;line-height:26px;}
        #guillaume {float:left;text-align:right;}
        #franck {float:right;text-align:left;}
        .avatar {height:50px;width:26px;}
        #guillaume .avatar {float:right;background-position:-708px -202px;margin-left:40px;}
        #franck .avatar {float:left;background-position:-734px -202px;margin-right:40px;}
        #seb {margin:180px auto 0 auto;width:52%;color:#373737;font-size:16px;}
        #seb a {color:#373737;text-decoration:none;}
        #seb a:hover {color:#397cd8;}
        #note {float:left;background-position:-802px -224px;height:22px;width:20px;}
        #close-credits {margin:20px auto 0 auto;text-align:center;clear:both;font-size:14px;}
        #sharing {width:202px;}
        
        /*About*/
        #about h1 span.title {max-width:500px;display:inline-block;line-height:24px;margin-top:-90px;position:relative;}
        #close-about {margin:153px auto 0 auto;text-align:center;clear:both;font-size:14px;color:#373737;}
        #about #game-desc {font-size:18px;text-align:center;max-width:70%;margin:25px auto;line-height:24px;}
        #about .left p, #about .right p {font-size:14px;text-align:left;line-height:20px;padding:0;margin-top:-8px;}
        .windows #about .left p, .windows #about .right p {font-size:13px;text-align:left;line-height:20px;padding:0;margin-top:-10px;}
        #about .left {width:31%;float:left;margin-left:12%;}
        #about .right {width:37%;float:right;margin-right:12%;}
        #about .left .img {height:60px;width:54px;float:left;background-position:-708px -344px;margin-right:14px;}
        #about .right .img {height:60px;width:112px;float:left;background-position:-708px -284px;margin-right:14px;}
        #about .link {clear:both;font-size:14px;margin:20px 0;display:block;text-align:left;line-height:10px;}
        #about .link a {color:#2e7fdd;text-decoration:none;}
        #about .link .ext-link {height:12px;width:12px;background-position:-798px -344px;display:block;float:left;margin-right:7px;}
        
        .animate .parchment-middle {-moz-animation:parchmiddle2 1s ease 1;-webkit-animation:parchmiddle2 1s ease 1;-o-animation:parchmiddle2 1s ease 1;-ms-animation:parchmiddle2 1s ease 1;}

        .game .parchment-middle {background-position: -422px -710px;}
        .game.credits .parchment-middle, .game.death .parchment-middle, .game.banned .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:692px;margin-left:-346px;background-position: -76px -710px;}
        
	    footer {font-size:16px;}
        #resize-check {height:2px;}
        
        #toggle-legal, #legal-link a, #nano-link a {padding:0 8px;}
        
        #name-tooltip {font-size:14px;width:280px;margin-left:-140px;height:20px;line-height:18px;top:-30px;}
        #name-tooltip:after {bottom:-8px;}
}
	
	@media screen and (max-width: 1000px) {
        .home-logo {margin-left:-170px;margin-top:-42px;transform:scale(0.35);}
        #text-window { width: 60%; }
        .world { font-size: 12px;}
        .createaccount-instructions { font-size: 8px; }
        #upgrade-scroll, #trade-player1-item, #trade-player2-item { width: 120px; }
        #player-list {max-height: 266px;}
        #stash {top:45px;}

        #waypoint {height:250px; top: 0}
        #waypoint .waypoint-icon {width:23px; height: 23px; background-image: url('../img/1/waypoint.png'); transform: scale(1.3); margin: 0 12px 0 6px;}
        #waypoint .waypoint-text { font-size: 20px; }
        .waypoint-row.active .waypoint-icon {background-position-x: -23px;}
        .waypoint-row.locked .waypoint-icon {background-position-x: -46px;}
        .waypoint-spaced-row {margin: 0 10px; border-bottom: solid 2px #373737; padding: 6px 0;}
        .waypoint-spaced-row:first-child {border-top: solid 2px #373737;}

        canvas {image-rendering:optimizeSpeed;}
        body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;}
        body {background:-webkit-gradient(radial, center center, 200, center center, 600, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;}
        .upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {
            background: url(../img/1/achievements.png);
        }
        .upscaled .item-gem, .upscaled .item-potion {background-image:url('../img/1/achievements-unlocks.png');}
        #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, #store, #settings, #party, #completed, #missing-account, #failed, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:422px auto;}
        #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-64px;z-index:3;}
        #logosparks {width:229px;height:42px;z-index:4;-moz-animation:logo1 .8s steps(6, end) infinite;-webkit-animation:logo1 .8s steps(6, end) infinite;-o-animation:logo1 .8s steps(6, end) infinite;-ms-animation:logo1 .8s steps(6, end) infinite;}
        #parchment, #loadcharacter, #banned, #createaccount, #createpassword, #enterpassword, #invalidconnection, #confirmation, #error, #legal {width:422px;height:198px;position:absolute;top:50%;left:50%;margin-left:-211px;margin-top:-101px;font-size:10px;text-align:center;z-index:2;}
        #parchment h1, #instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {margin-top:20px;font-weight:normal;}
        .left-ornament, .right-ornament {height:12px;width:31px;display:inline-block;margin:0 10px;position:relative;top:3px;}
        .left-ornament {background-position:-354px 0;}
        .right-ornament {background-position:-385px 0;}
        #character {height:21px;width:12px;margin:0 auto;background-position:-354px -12px;margin-top:15px;position:relative;}
        #character div {height:21px;width:12px;position:absolute;top:0;left:0;background-position:-366px -12px;opacity:1;}
        #character.disabled div {opacity:0;pointer-events:none;}
        #parchment input,
        #parchment textarea,
        #store input,
        .account-container input {margin-top:10px; padding:0 5px; border:1px dashed #b2af9b; font-size:10px;border-radius:3px;height:21px;color:#eee;}
        #parchment textarea { height: 30px; padding-top: 6px; }
        #parchment.createcharacter input {margin-top:4px;height:15px;}
        .button {height:51px;width:125px;background-position:-229px -102px;margin:10px auto 0 auto;position:relative;}
        .play div {height:51px;width:125px;background-position:-229px 0px;}
        .play div:active {background-position:-229px -153px;}
        .play.loading div {background-position:-640px -566px}
        .play.loading img {height:18px;width:18px; top: 62%;}
        .stroke, .achievement-name {text-shadow:1px 1px 0 #373737, 1px -1px 0 #373737, 0 1px 0 #373737, 1px 0 0 #373737, -1px 1px 0 #373737, -1px -1px 0 #373737, 0 -1px 0 #373737, 0 1px 0 #373737, -1px 0 0 #373737;}
        
        #loadcharacter h1, #banned h1, #createaccount h1, #createpassword h1, #enterpassword h1, #invalidconnection h1, #confirmation h1, #error h1, #legal h1 {margin-top:20px;}
        .loadcharacter .play, .createpassword .play, .confirmation .delete {margin:5px auto 5px auto;}
        #confirmation p, #error p, #legal p {font-size:10px;margin-top:20px;line-height:20px;}
        #legal p {margin:20px auto 0;line-height:12px;}
        #error p {width:70%;margin:40px auto 0;}
        .button.delete {background-position:-229px -51px;}
        .button.delete:active {background-position:0 -726px;}
        .validation-error {font-size:11px;}
        
		#container {width:490px;margin:0 auto;position:absolute;top:50%;margin-top:-126px;left:50%;margin-left:-245px;}
		#canvasborder {padding:5px;background:url('../img/1/border.png') no-repeat;}
        #expbar{right:5px;width: 10px;}
		#canvas {width:100%;height:224px;}
		#fade {width:480px;height:224px;top:5px;left:5px;}
        .playerimage {
            height: 32px;
            width: 32px;
        }
		
		#instructions, #store, #settings, #party, #completed, #missing-account, #failed {height:193px;width:417px;background-position:0 -568px;margin-left:-208px;margin-top:-103px;color:#373737;}
		#instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {font-size:20px;text-align:center;margin-bottom:0;}
        #instructions ul {font-size:10px;margin-top:10px;}
        #instructions ul li {margin:10px 0; clear:left;}
        #instructions ul li span {display:block;float:left;position: relative;}
        #instructions li:nth-child(1) span {height:29px;width:15px;background-position:-378px -12px;margin: 0 10px 0 20px;top: -13px;}
        #instructions li:nth-child(2) span {height:16px;width:13px;background-position:-393px -12px;margin: 0 12px 14px 20px;top: -3px;}
        #instructions li:nth-child(3) span {height:21px;width:16px;background-position:-406px -12px;margin: 0 9px 6px 20px;top: -6px;}
        #instructions li:nth-child(4) span {height:38px;width:28px;background:url('../img/1/anvil.png') no-repeat;background-size: cover;margin: 0 2px 0 16px;top: -16px;}
        #instructions p, #completed p, #missing-account p, #failed p {text-align:center;font-family:'GraphicPixel';font-size:10px;clear:left;margin:0;}

        #foreground { cursor: default;}
        
        #player-image {height: 32px; width: 32px;}

        .close {height:16px;width:16px;top:-4px;right:-5px;background-position:-354px -126px;scale:1.5}
        .close:hover {background-position:-370px -126px;}
        .close:active {background-position:-386px -126px;}

        .ribbon {width:18px;right:10px;top:4px;}
        .ribbon .top {width:100%;height:6px;background-position:-381px -172px;}
        .ribbon .bottom {width:100%;height:22px;background-position:-381px -185px;}
        .ribbon:hover .top {height:10px;}
        .ribbon:hover .bottom {background-position:-399px -185px;}
        #createcharacter .ribbon {right:10px;top:4px;}
        #loadcharacter .ribbon {right:50px;top:4px;}
        
        #close-legal {font-size:10px;margin-top:10px;}
        
        /*Death & Respawn*/
        #death p {font-size:10px;}
        #death > p {margin-top:45px;}
        #death p em {margin-top:0px;}
		#respawn {width:125px;height:51px;margin:21px auto 0 auto;background-position: 0 -300px;}
		#respawn:active {background-position:-125px -476px;}
		
		/*Bubbles*/
		#bubbles {width:480px;height:224px;margin-bottom:-224px;position:relative;top:-224px;pointer-events:none;}
		p {font-size:12px;margin:0;padding:0;line-height:2em;}
	    .bubble p {font-family:"GraphicPixel"; font-size:10px;}
	    
	    /*GUI Bar*/
	    #bar-container {height:17px;top:-1px;background-size:480px;}

		#healthbar {height:13px;background-position:0 -17px;width:102px;top:3px;background-size:480px;z-index:20;}
		#hitpoints {width:0px;height:11px;top:4px;left:11px;z-index:10;position:absolute;}
		#hpguide {left: 11px; top: 4px; width: 1px; height: 11px; z-index: 30; }

        .item-slot { width:20px; height: 20px; }
        #armor, #weapon, #skill-attack, #skill-defense, .item-draggable, .item-not-draggable, .item-rune {width:16px;height:16px;background-size:96px;background-position:-32px;}
        .item-rune { width: 16px; height: 16px; border-radius: 8px; }
        #armor, #weapon, #skill-attack, #skill-defense {position:absolute;}
        #weapon {left:104px;top:1px;}
        #armor {left:121px;top:1px;}

        #notifications {width:186px;margin-left:-98px;font-size:10px;color:#eee;top:2px;height:15px;}
        #notifications div.top {top:-15px;}
        #notifications span {line-height:15px;height:15px;}

        #player-count {font-size:10px;left:348px;top:4px;width:54px;text-align:center;}

        #completedbutton {background-position:-668px -34px;top:2px;left:870px;width:28px;}
        #completedbutton:hover {background-position:-696px -34px;}
        #completedbutton.active {background-position:-724px -34px;}
        #completedbutton.ban {background-position:-836px -34px;}
        #completedbutton.ban:hover {background-position:-864px -34px;}
        #completedbutton.ban.active {background-position:-892px -34px;}

        .panel {bottom:22px;width:262px;font-size:14px;line-height:20px;}
        .panel.panel-large {width:302px;}
        .panel-container {right: calc(5% + 262px);}
        #population {right:70px;}
        #player {left:20px;}
        #waypoint {left:20px;}

        .panel > div {background-size:960px;background-position:-480px -104px;}
        .panel-header {background-position:-480px -96px !important;padding-top: 8px;}
        .panel.panel-large > div {background-position:0 -138px;}
        .panel-large .panel-header {background-position:0 -130px !important;}

        .barbutton {background-size:480px;height:15px;width:14px;}
        #chatbutton {background-position:-102px -17px;top:1px;left:405px;}
        #chatbutton:hover, #chatbutton.blink:hover {background-position:-116px -17px;}
        #chatbutton.blink {background-position:-302px -17px;}
        #chatbutton.active {background-position:-130px -17px;}
        #achievementsbutton {background-position:-144px -17px;top:1px;left:420px;}
        #achievementsbutton:hover, #achievementsbutton.blink:hover {background-position:-158px -17px;}
        #achievementsbutton.blink {background-position:-288px -17px;}
        #achievementsbutton.active {background-position:-172px -17px;}
        #settings-button {background-position:-376px -17px;top:1px;left:465px;}
        #settings-button:hover {background-position:-390px -17px;}
        #settings-button.active {background-position:-404px -17px;}
        #party-button {background-position:-404px -32px;top:1px;left:450px;}
        #party-button:hover {background-position:-418px -32px;}
        #party-button.blink {background-position:-432px -32px;}
        #party-button.active {background-position:-446px -32px;}

		#chatbox {height:16px;width:394px;background-size:480px;background-position:0 -32px;margin-left:-197px;bottom:6px;}
		#chatbox.active {bottom:22px;}
		#chatbox input {font-size:10px;background:none;width:90%;border:0;margin-left:2%;padding:0;}
		
		/*Credits*/
        #credits, #death, #banned, #about {width:422px;height:182px;top:50%;margin-left:-211px;margin-top:-91px;font-size:10px;}
        #credits h1 a {font-size:12px;}
        .parchment-left, .parchment-right, .parchment-middle {background-size:422px;}
        .parchment-left {width:38px;height:198px;background-position:0px -356px;}
        .parchment-right {width:38px;height:198px;background-position:-384px -356px;}
        .parchment-middle {height:198px;background-position:-38px -356px;width:346px;margin-left:-173px;}
        
        #credits h1, #about h1 {margin-top:12px;font-weight:normal;}
        .game #credits h1, .game #about h1 {margin-top:20px;}
        #credits h1 span.title {max-width:100px;display:inline-block;line-height:13px;margin-top:-30px;position:relative;top:12px;}
        #authors {clear:both;margin-top:36px;}
        #guillaume, #franck {width:47%;line-height:13px;}
        #guillaume {float:left;text-align:right;}
        #franck {float:right;text-align:left;}
        .avatar {height:25px;width:13px;}
        #guillaume .avatar {float:right;background-position:-354px -101px;margin-left:20px;}
        #franck .avatar {float:left;background-position:-367px -101px;margin-right:20px;}
        #seb {margin:90px auto 0 auto;width:64%;color:#373737;font-size:10px;}
        #seb a {color:#373737;text-decoration:none;}
        #seb a:hover {color:#397cd8;}
        #note {float:left;background-position:-401px -112px;height:11px;width:10px;}
        #close-credits {margin:12px auto 0 auto;text-align:center;clear:both;font-size:10px;}
        #sharing {width:202px;}
        
        /*About*/
        #about h1 span.title {max-width:500px;display:inline-block;line-height:24px;margin-top:-30px;position:relative;margin-bottom:-10px;}
        #close-about {margin:77px auto 0 auto;text-align:center;clear:both;font-size:10px;color:#373737;}
        #about #game-desc {font-size:10px;text-align:center;max-width:70%;margin:10px auto;line-height:14px;}
        #about .left p, #about .right p {font-size:9px;text-align:left;line-height:10px;padding:0;margin-top:-6px;}
        #about .left {width:37%;float:left;margin-left:10%;}
        #about .right {width:37%;float:right;margin-right:12%;}
        #about .img {display:none;}
        #about .link {clear:both;font-size:9px;margin:10px 0;display:block;text-align:left;line-height:5px;}
        #about .link a {color:#2e7fdd;text-decoration:none;}
        #about .link .ext-link {height:6px;width:6px;background-position:-399px -172px;display:block;float:left;margin-right:4px;}
        
        .animate .parchment-middle {-moz-animation:parchmiddle1 1s ease 1;-webkit-animation:parchmiddle1 1s ease 1;-o-animation:parchmiddle1 1s ease 1;-ms-animation:parchmiddle1 1s ease 1;}
        
        .game .parchment-middle {background-position: -211px -356px;}
        .game.credits .parchment-middle, .game.death .parchment-middle, .game.banned .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:346px;margin-left:-173px;background-position: -38px -356px;}

        #resize-check {height:1px;}
        
        #name-tooltip {font-size:10px;width:180px;margin-left:-90px;height:10px;line-height:10px;top:-30px;border-radius:4px;}
        #name-tooltip:after {bottom:-8px;}
	}

	@media screen and (max-width: 800px) {
        #text-window { width: calc(100% - 30px); height: 50vh; }
        .createaccount-instructions { font-size: 8px; }
        #upgrade-scroll, #trade-player1-item, #trade-player2-item { width: 120px; }
        .panel-container {
            flex-direction: row;
            width: auto !important;
            left: auto;
            right: 0;
        }
        #container #completed p { font-size: 10px; }
        .panel {scale: 0.8;}
        .panel#population { bottom: 16px; }
        .panel#player {left: -20px; bottom: 18px;}
        .panel#waypoint {left: -20px;}
        .panel#trade, .panel#merchant {position: relative;left: 42px;}
        .panel#upgrade {position: relative;left: 42px;}
        .panel#inventory {bottom:22px;}
        .panel#inventory.trade, .panel#inventory.merchant, .panel#inventory.upgrade {bottom:auto}
        #player-list {max-height: 166px;}
        #stash {top: 0;right: 230px;}

        body {border-top:0px;}
        .intro #container, .game #logo, .game #parchment {display:none;}
        .game.about #parchment {display:block;left:50%;background:url('../img/1/spritesheet.png') no-repeat 0 -568px;height:193px;width:417px;top:50%;margin-left:-208px;margin-top:-113px;position:absolute;}
        .game.about .parchment-middle {top:50%;left:50%;color:#000;position:absolute;}
        #about .right {width:34%;}
        #about #game-desc {margin:8px auto 16px;line-height:12px;}
        #close-about {margin-top:83px;}
        .game #container {display:block;padding:0;}
        #mask, #fade {display:none;}
        .game.death #parchment, .game.banned #parchment {display:block;}
        .game .createcharacter #createcharacter, .game .loadcharacter #loadcharacter, .game .loadcharacter #createpassword, .game .loadcharacter #enterpassword, .game .banned #banned, .game .createaccount #createaccount, .game .invalidconnection #invalidconnection, .game .confirmation #confirmation, .game .error #error, .game .legal #legal {display:none;}
        
		.ribbon {display:none;}
        
        canvas {image-rendering:optimizeSpeed;}
        #moztab {display:none;}
        body.intro {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;}
        body.intro {background:-webkit-gradient(radial, center center, 120, center center, 400, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;}
        body {background:#000;}
        #logosparks {-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;display:none;}
		/* #container {height:516px;width:960px;position:relative;left:0;top:0;margin:0;} */
		#container {height:258px;width:480px;position:relative;left:50%;top:50%;margin:-128px auto 0 -240px;}
		#canvasborder {background:none;padding:0;}
        #expbar{right:0;width: 10px;}
		
		#parchment, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, #store, #settings, #party, #completed, #missing-account, #failed, .icon {background-size:422px auto;}
        #parchment {background:none;}
        #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;background-size:422px;}
        /* #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;background-size:844px;} */
        #parchment {width:100%;height:auto;position:absolute;left:0;top:82px;margin-left:0;margin-top:0;font-size:10px;text-align:center;z-index:2;color:#eee;}
        #parchment h1 {margin-top:0px;font-weight:normal;}
        #instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {margin-top:15px;font-size:14px;}
        .left-ornament, .right-ornament {height:12px;width:31px;display:inline-block;margin:0 10px;position:relative;top:3px;}
        .left-ornament {background-position:-354px 0;}
        .right-ornament {background-position:-385px 0;}
        #character {height:21px;width:12px;margin:0 auto;background-position:-354px -12px;margin-top:15px;position:relative;display:none;}
        #character div {height:21px;width:12px;position:absolute;top:0;left:0;background-position:-366px -12px;opacity:1;}
        #character.disabled div {opacity:0;pointer-events:none;}
        #parchment input,
        #parchment textarea,
        #store input,
        .account-container input {margin-top:10px; border-bottom:1px dashed #b2af9b; font-size:14px;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;color:#eee;}
        #parchment textarea { height: 42px; padding-top: 6px; }
        #parchment.createcharacter input {margin-top:4px;height:15px;}
        .button {height:54px;width:204px;background-position: -663px -512px;margin:20px auto 0 auto;position:relative;background-size:844px;}
        .play, #create-new {font-size:16px;}
        .play div {height:54px;width:204px;background-position:-458px -512px; background-size:844px;}
        /* .play div:active {background-position:0px -1398px;} */
        #create-new {margin-top:0;}
        .stroke {text-shadow:1px 1px 0 #373737, 1px -1px 0 #373737, 0 1px 0 #373737, 1px 0 0 #373737, -1px 1px 0 #373737, -1px -1px 0 #373737, 0 -1px 0 #373737, 0 1px 0 #373737, -1px 0 0 #373737;}
        .validation-error {color:#ffc2c2;}
		
		#instructions, #store, #settings, #party, #completed, #missing-account, #failed {height:193px;width:417px;background-position:0 -568px;margin-left:-208px;margin-top:-113px;color:#373737;}
		#instructions h1, #store h1, #settings h1, #party h1, #completed h1, #missing-account h1, #failed h1 {font-size:20px;text-align:center;margin-bottom:0;}
        #instructions ul {font-size:13px;margin-top:15px;}
        #instructions ul li {margin:10px 0; clear:left;}
        #instructions ul li span {display:block;float:left;position: relative;}
        #instructions li:nth-child(1) span {height:29px;width:15px;background-position:-378px -12px;margin: 0 10px 0 20px;top: -13px;}
        #instructions li:nth-child(2) span {height:16px;width:13px;background-position:-393px -12px;margin: 0 12px 14px 20px;top: -3px;}
        #instructions li:nth-child(3) span {height:21px;width:16px;background-position:-406px -12px;margin: 0 9px 6px 20px;top: -6px;}
        #instructions li:nth-child(4) span {height:38px;width:28px;background:url('../img/1/anvil.png') no-repeat;background-size: cover;margin: 0 2px 0 16px;top: -16px;}
        #instructions p, #completed p, #missing-account p, #failed p {text-align:center;font-family:'GraphicPixel';font-size:10px;clear:left;margin:0;}
		
		#foreground { cursor:default; }
		
		#parchment.animate {-moz-animation:none;-webkit-animation:none;-o-animation:none;-webkit-animation:none;}
		
		#loadcharacter, #banned, #createaccount, #invalidconnection, #confirmation, #createcharacter, #createpassword, #enterpassword, #error, #legal {display:none;margin-top:0;margin-left:0;left:0;width:auto;}
		.loadcharacter #loadcharacter, .banned #banned, .createaccount #createaccount, .invalidconnection #invalidconnection, .confirmation #confirmation, .createcharacter #createcharacter, .createpassword #createpassword, .enterpassword #enterpassword, .error #error, .legal #legal {display:block;width:100%;}
		
		#loadcharacter h1, #banned h1, #createaccount h1, #confirmation h1, #error h1, #legal h1 {font-size:12px;font-weight:normal;}
		
		#loadcharacter, #banned, #createaccount, #createpassword, #enterpassword, #invalidconnection, #confirmation, #error, #legal {height:auto;}
	
	    #loadcharacter h1, #banned h1, #createaccount h1, #invalidconnection h1, #confirmation h1, #createcharacter h1, #createpassword h1, #enterpassword h1, #error h1, #legal h1 {font-size:12px;}
	    #createcharacter{padding-bottom:20px;}
		.playername {font-size:20px;}
		#continue {margin:20px 0px;font-size:16px;}
		#cancel {margin:20px 0;font-size:16px;}
		.button.delete {background-position:-612px -1398px;}
		.button.delete:active {background-position:-250px -1452px;}
		#confirmation, #error {top:70%;}
		#confirmation p, #error p {margin:10px 0;line-height:12px;font-size:12px;}
		
		#player-image {display:none;}

		#bar-container {height:34px;top:-2px;background-size:960px;background-position:0 -96px;}

		#healthbar {height:26px;background-position:0 -34px;width:204px;top:6px;background-size:960px;z-index:20;}
		#hitpoints {width:0px;height:22px;top:8px;left:22px;z-index:10;position:absolute;}
		#hpguide {left: 22px; top: 8px; width: 2px; height: 22px; z-index: 30; }

        .item-slot { width:36px; height:36px; }
        #armor, #weapon, #skill-attack, #skill-defense, .item-draggable, .item-not-draggable, .item-rune {width:32px;height:32px;background-size:192px;background-position:-32px;}
        .item-rune { width: 30px; height: 30px; border-radius: 15px; }
        #armor, #weapon, #skill-attack, #skill-defense {position:absolute;}
        #weapon {left:208px;top:2px;}
        #armor {left:242px;top:2px;}
        #skill-attack {left:276px;top:2px;}
        #skill-defense {left:310px;top:2px;}

        #notifications {display:none;}

        #player-count {font-size:20px;left:270px;top:10px;width:114px;text-align:center;}
        #player-count span {display:none;}
        #player-count span.count {display:inline;}
        .panel {bottom:34px;width:262px;font-size:14px;line-height:20px;}
        .panel.panel-large {width:302px;}
        .panel-container {right: 0;}
        #population {right:0px;}
        #player {left:20px;}
        #waypoint {left:20px;}

        .panel > div {background-size:960px;background-position:-480px -104px;}
        .panel-header {background-position:-480px -96px !important;padding-top: 6px;}
        .panel.panel-large > div {background-position:0 -138px;}
        .panel-large .panel-header {background-position:0 -130px !important;}

        .barbutton {background-size:960px;height:30px;width:28px;}
        #chatbutton {background-position:-204px -34px;top:2px;left:360px;}
        #chatbutton:hover, #chatbutton.blink:hover {background-position:-232px -34px;}
        #chatbutton.blink {background-position:-604px -34px;}
        #chatbutton.active {background-position:-260px -34px;}
        #achievementsbutton {background-position:-288px -34px;top:2px;left:390px;}
        #achievementsbutton:hover, #achievementsbutton.blink {background-position:-316px -34px;}
        #achievementsbutton.active {background-position:-344px -34px;}
        #completedbutton {background-position:-668px -34px;top:2px;left:420px;width:28px;}
        #completedbutton:hover {background-position:-696px -34px;}
        #completedbutton.active {background-position:-724px -34px;}
        #completedbutton.ban {background-position:-836px -34px;}
        #completedbutton.ban:hover {background-position:-864px -34px;}
        #completedbutton.ban.active {background-position:-892px -34px;}
        #settings-button { display: none; }
        #party-button {background-position:-808px -64px;top:2px;left:450px;}
        #party-button:hover {background-position:-836px -64px;}
        #party-button.blink {background-position:-864px -64px;}
        #party-button.active {background-position:-892px -64px;}

		#chatbox {height:32px;width:480px;background-size:960px;background-position:0 -64px;margin-left:-240px;bottom:2px;}
		#chatbox.active {bottom:34px;}
		#chatbox input {font-size:14px;background:none;width:90%;border:0;margin-left:2%;padding:4px 0;}
		
		/*Credits*/
        .parchment-left, .upscaled .parchment-left, .parchment-middle, .upscaled .parchment-middle, .parchment-right, .upscaled .parchment-right {background:none;}
        .parchment-left, .parchment-right {display:none;}
		.parchment-middle {width:100%;left:0px;margin-left:0px;height:auto;position:relative;}
		#toggle-credits, #credits {display:none;}
		
		.game.death #parchment, .game.banned #parchment {background:url('../img/1/spritesheet.png') 0 -355px;height:202px;width:422px;position:absolute;top:50%;left:50%;margin-top:-116px;margin-left:-211px;}
        .game.death .parchment-middle, .game.death .parchment-middle {width:100%;position:relative;top:0;left:0;margin-left:0;margin-top:0;}
        .game.death #death { position:relative;top:0;left:0;margin-top:0;margin-left:0;width:100%;}
        .game.death #death p {color:#373737;font-size:20px;margin-top:0;width:80%;margin:0 auto;}
        .game.death #death > p {padding-top:30px;}
        .game.death #death p em {display:block;margin-top:15px;font-style:normal;}

        #instructions, #completed, #missing-account, #failed, #achievements, #lists, #about {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}

		.game.death #death, .game.banned #banned {height:193px;width:417px;margin-left:-208px;margin-top:-113px;color:#373737;/*background:url('../img/1/spritesheet.png') 0 -568px;*/margin:-10px 0 0 0;}
        /* #respawn { background-position: -204px -1398px; background-size: 844px auto; width: 204px; height: 54px;}
		#respawn:active {background-position:-408px -1398px;} */
        #respawn {
            background-position: 0px -607px;
            background-size: 844px auto;
            width: 251px;
            height: 94px;
        }
		#respawn:active {background-position:-250px -607px;}

        #sharing, #credits-link, .dash {display:none;}
        #legal-link .dash, #nano-link .dash {display:inline;}
        #bubbles {overflow:hidden;}
        
        .intro footer, .intro footer {display:block;}
        footer {display:none;position:absolute;left:0;z-index:9000;height:30px;width:100%;bottom:5%;}
        .returning footer, .returning footer {top:300px;}
        #close-legal {display:none;}
        
        #privacy-link span:hover, #legal-link span:hover, #nano-link span:hover {color:#C6C0A3;}
        #legal p {font-size:12px;width:80%;line-height:14px;}
        
        #name-tooltip {display:none;}
	}

	@media screen and (max-width: 800px) and (orientation: portrait) {
        #portrait {display:block;height:300px;width:300px;position:absolute;top:55%; left:50%; margin:-150px 0 0 -150px;}
        #parchment {display:none;}
        #container, .game #container {display:none;}
        
        #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;background-size:422px;}
        /* #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;background-size:844px;} */
        #portrait p {color:#eee;font-family:'GraphicPixel', sans-serif;font-size:20px;text-align:center;}
        
        #tilt {height:120px;width:132px;background-position:-710px -82px;background-size:844px;margin:25px auto 0 auto;}
        
        .intro #toggle-legal, #toggle-legal, .intro #legal-link, #legal-link {display:none;}
    }
    
    @media screen and (max-width: 640px) and (orientation: portrait) {
        #portrait {display:block;height:300px;width:300px;position:absolute;top:70%; left:50%; margin:-150px 0 0 -150px;}
        
        #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;background-size:422px;}
    }

/* Tablet mode */

    .tablet .animate .parchment-left, .tablet .animate .parchment-right, .tablet .animate .parchment-middle {-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;}
    .tablet #instructions, .tablet #store, .tablet #settings, .tablet #party, .tablet #completed, .tablet #missing-account, .tablet #failed, .tablet #achievements, .tablet #lists {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
    .tablet #achievements li.unlocked .achievement-sharing {display:block;}
    .tablet #coinsparks {display:none; -moz-animation:none;}
    
    .tablet #logo, .tablet #parchment, .tablet #container {-moz-transition:none;}
    .tablet #achievement-notification .name, .tablet #achievement-notification .title, .tablet #achievement-notification .coin, .tablet #achievement-notification {-moz-transition:none;}
    
/* Workarounds for chrome windows bugs */

    .windows #parchment, .windows #parchment input, .windows , #store input, .windows #parchment textarea, .windows #notifications, .windows #instructions, .windows #store, .windows #settings, .windows #party, .windows #completed, .windows #missing-account, .windows #failed, .windows #achievements, .windows #achievement-notification, 
    .windows #player-count, .windows #credits, .windows #loadcharacter, .windows #banned, .windows #invalidconnection, .windows #confirmation, .windows #death, .windows #error, .windows #about, .windows #legal, 
    .windows #parchment p, .windows #portrait p, .windows .alert, .windows footer, .windows .bubble p, .windows #population .windows #player, .windows #chatinput {font-family:'AdvoCut';}

/* Workarounds for opera's lack of pointer-events support */

    .opera.intro #bubbles, .opera.intro #canvas, .opera.intro #container { z-index: -30000;}
    .opera .credits #credits, .opera .createcharacter #createcharacter, .opera .loadcharacter #loadcharacter, .opera .banned #banned, .opera .createaccount #createaccount, .opera .invalidconnection #invalidconnection, .opera .confirmation #confirmation, .opera .death #death, 
    .opera .error #error, .opera .about #about, .opera .legal #legal { z-index: 30000; }
    .opera #instructions, .opera #store, .opera #completed, .opera #missing-account, .opera #failed, .opera #achievements { z-index: -30000;}
    .opera #achievements.active, .opera #instructions.active, .opera #store.active, .opera #completed.active, .opera #missing-account.active, .opera #failed.active { z-index: 30000;}
    .opera #coinsparks {display:none;}
    .opera #death, .opera #about, .opera #credits, .opera #error, .opera #confirmation, .opera #loadcharacter, .opera #legal { z-index: -30000; }

#achievements-wrapper {overflow:hidden;}
#achievements ul:first-child {margin-left:0;}
#lists {-moz-transition:0.5s left ease-in-out;-webkit-transition:0.5s left ease-in-out;-o-transition:0.5s left ease-in-out;-ms-transition:0.5s left ease-in-out;transition:0.5s left ease-in-out;position:relative;}
#achievements-count {float:left;color:#fff;}
#achievements-potion-count {float:right;color:#fff;}
#achievement-notification .coin {-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;}
#achievements-unlocks-count, #potion-count { display: flex; align-items: center; }
#achievements-unlocks-count > div { margin-right: 10px; }
#potion-count > div { margin-left: 10px; }
#potion-count { justify-content: flex-end;}
#achievements li, .upscaled #achievements li { display: flex; align-items: center; }

@media screen and (min-width: 1501px) {
    .coin {width:72px;height:78px;}
    .achievement1 .coin {background-position:0 -666px;}
    .achievement2 .coin {background-position:-72px -666px;}
    .achievement3 .coin {background-position:-144px -666px;}
    .achievement4 .coin {background-position:-216px -666px;}
    .achievement5 .coin {background-position:-288px -666px;}
    .achievement6 .coin {background-position:-360px -666px;}
    .achievement7 .coin {background-position:-432px -666px;}
    .achievement8 .coin {background-position:-504px -666px;}
    .achievement9 .coin {background-position:-576px -666px;}
    .achievement10 .coin {background-position:-648px -666px;}
    .achievement11 .coin {background-position:-720px -666px;}
    .achievement12 .coin {background-position:-792px -666px;}
    .achievement13 .coin {background-position:-864px -666px;}
    .achievement14 .coin {background-position:-936px -666px;}
    .achievement15 .coin {background-position:-1008px -666px;}
    .achievement16 .coin {background-position:-1008px -822px;}
    .achievement17 .coin {background-position:-1080px -666px;}
    .achievement18 .coin {background-position:-1080px -822px;}
    .achievement19 .coin {background-position:-864px -822px;}
    .achievement20 .coin {background-position:-936px -822px;}
    .achievement21 .coin {background-position:-1152px -666px;}
    .achievement22 .coin {background-position:-648px -822px;}
    .achievement23 .coin {background-position:-720px -822px;}
    .achievement24 .coin {background-position:-792px -822px;}
    .achievement25 .coin {background-position:-648px -900px;}
    .achievement26 .coin {background-position:-720px -900px;}
    .achievement27 .coin {background-position:-792px -900px;}
    .achievement28 .coin {background-position:-864px -900px;}
    .achievement29 .coin {background-position:-936px -900px;}
    .achievement30 .coin {background-position:-1008px -900px;}
    .achievement31 .coin {background-position:-1080px -900px;}
    .achievement32 .coin {background-position:-1152px -900px;}
    .achievement33 .coin {background-position:-648px -978px;}
    .achievement34 .coin {background-position:-720px -978px;}
    .achievement35 .coin {background-position:-792px -978px;}
    .achievement36 .coin {background-position:-864px -978px;}
    .achievement37 .coin {background-position:-936px -978px;}
    .achievement38 .coin {background-position:-1008px -978px;}
    .achievement39 .coin {background-position:-1080px -978px;}
    .achievement40 .coin {background-position:-1152px -978px;}
    .achievement41 .coin {background-position:-648px -1056px;}
    .achievement42 .coin {background-position:-720px -1056px;}
    .achievement43 .coin {background-position:-792px -1056px;}
    .achievement44 .coin {background-position:-864px -1056px;}
    .achievement45 .coin {background-position: 0px -912px;}
    .achievement46 .coin {background-position: -72px -912px;}
    .achievement47 .coin {background-position: -144px -912px;}
    .achievement48 .coin {background-position: -216px -912px;}
    .achievement49 .coin {background-position: -288px -912px;}
    .achievement50 .coin {background-position: -360px -912px;}
    .achievement51 .coin {background-position: -432px -912px;}
    .achievement52 .coin {background-position: -504px -912px;}
    .achievement53 .coin {background-position: -576px -912px;}
    .achievement54 .coin {background-position: 0px -990px;}
    .achievement55 .coin {background-position: -72px -990px;}
    .achievement56 .coin {background-position: -144px -990px;}
    .achievement57 .coin {background-position: -216px -990px;}
    .achievement58 .coin {background-position: -288px -990px;}
    .achievement59 .coin {background-position: -360px -990px;}
    .achievement60 .coin {background-position: -432px -990px;}
    .achievement61 .coin {background-position: -504px -990px;}
    .achievement62 .coin {background-position: -576px -990px;}
    .achievement63 .coin {background-position: 0px -1068px;}
    .achievement64 .coin {background-position: -72px -1068px;}
    .achievement65 .coin {background-position: -144px -1068px;}
    .achievement66 .coin {background-position: -216px -1068px;}
    .achievement67 .coin {background-position: -288px -1068px;}
    .achievement68 .coin {background-position: -360px -1068px;}
    .achievement69 .coin {background-position: -432px -1068px;}
    .achievement70 .coin {background-position: -504px -1068px;}
    .achievement71 .coin {background-position: -576px -1068px;}
    .achievement72 .coin {background-position: 0 -1146px;}
    .achievement73 .coin {background-position: -72px -1146px;}
    .achievement74 .coin {background-position: -144px -1146px;}
    .achievement75 .coin {background-position: -216px -1146px;}
    .achievement76 .coin {background-position: -288px -1146px;}
    .achievement77 .coin {background-position: -360px -1146px;}
    .achievement78 .coin {background-position: -432px -1146px;}
    .achievement79 .coin {background-position: -504px -1146px;}
    .achievement80 .coin {background-position: -576px -1146px;}

    #achievements-wrapper {height:387px;width:1116px;margin:50px 0 10px 60px;}
    #achievements ul {float:left;margin-left:60px;}
    #achievements nav {height:66px;width:202px;margin:0 auto;}
    #previous, #next {height:66px;width:102px;display:inline-block;}
    .page1 #previous, .upscaled .page1 #previous {background-position:0px -846px;}
    .page20 #next, .upscaled .page20 #next {background-position:-99px -846px;}
    #previous, .upscaled #previous {background-position:-201px -846px;}
    #previous:active, .upscaled #previous:active {background-position:-402px -846px;}
    #next, .upscaled #next {margin-left:-15px;background-position:-300px -846px;}
    #next:active, .upscaled #next:active {background-position:-501px -846px;}

    .page1 #previous:hover, .page1 #previous:active {background-position:0px -846px;}
    .page20 #next:hover, .page20 #next:active {background-position:-99px -846px}
    
    #lists {width:24000px;}
    #achievements.page1 #lists {left:0;}
    #achievements.page2 #lists {left:-1176px;}
    #achievements.page3 #lists {left:-2352px;}
    #achievements.page4 #lists {left:-3528px;}
    #achievements.page5 #lists {left:-4704px;}
    #achievements.page6 #lists {left:-5880px;}
    #achievements.page7 #lists {left:-7056px;}
    #achievements.page8 #lists {left:-8232px;}
    #achievements.page9 #lists {left:-9408px;}
    #achievements.page10 #lists {left:-10584px;}
    #achievements.page11 #lists {left:-11760px;}
    #achievements.page12 #lists {left:-12936px;}
    #achievements.page13 #lists {left:-14112px;}
    #achievements.page14 #lists {left:-15288px;}
    #achievements.page15 #lists {left:-16464px;}
    #achievements.page16 #lists {left:-17640px;}
    #achievements.page17 #lists {left:-18816px;}
    #achievements.page18 #lists {left:-19992px;}
    #achievements.page19 #lists {left:-21168px;}
    #achievements.page20 #lists {left:-22344px;}
    
    #achievements-count {margin:12px 0 0 72px;}
    #achievements-potion-count {margin:12px 72px 0 0;}
    #achievements-unlocks-count, #potion-count {margin-bottom: 12px;}
    #achievements-unlocks-count {height: 30px;}

    .item-gem {background-position:0px 0px; width: 21px; height: 18px;}
    #gem-ruby.active {background-position:-21px 0px;}
    #gem-emerald.active {background-position:-42px 0px;}
    #gem-amethyst.active {background-position:-63px 0px;}
    #gem-topaz.active {background-position:-84px 0px;}
    #gem-sapphire.active {background-position:-105px 0px;}
    .item-potion {background-position:0 -18px; width: 21px; height: 30px}
    .item-potion.active {background-position:-21px -18px;}
    .item-potion.ban.active {background-position:-42px -18px;}

    #achievements, #achievements li, #achievements .coin, #achievement-notification, #achievement-notification .coin, #coinsparks, .achievement-sharing a, #previous, #next {background-size:1248px !important;}
    #achievements {height:588px;width:1248px;margin-left:-624px;margin-top:-324px;font-size:30px;}
    #achievements li, .upscaled #achievements li { height:78px;width:1116px;background-position:0 -588px;margin:15px 0;}
    #achievements li .coin {margin-right:30px;}
    .achievement-sharing {right:24px;top:24px;}
    .achievement-sharing .facebook {height:33px;width:15px;background-position:-1116px -588px;}
    .achievement-sharing .facebook:hover {background-position:-1116px -621px;}
    .achievement-sharing .twitter, .upscaled .achievement-sharing .twitter {height:33px;width:48px;background-position:-1131px -588px;margin-left:15px;}
    .achievement-sharing .twitter:hover, .upscaled .achievement-sharing .twitter:hover {background-position:-1131px -621px;}
    
    #achievement-notification, .upscaled #achievement-notification {width:648px;bottom:66px;height:0;margin-left:-324px;background-position:0 -744px;}
    #achievement-notification.active {height:102px;}
    #achievement-notification .coin {position:absolute;top:-60px;left:50%;margin-left:-36px;opacity:0;}
    #achievement-notification.active .coin {opacity:1;}
    #achievement-notification.active #coinsparks, 
    .upscaled #achievement-notification.active #coinsparks {
        height:78px;
        width:72px;
        -moz-animation:coinsparks3 0.8s steps(6, end) 7;
        -webkit-animation:coinsparks3 0.8s steps(6, end) 7;
        -o-animation:coinsparks3 0.8s steps(6, end) 7;
        -ms-animation:coinsparks3 0.8s steps(6, end) 7;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
    }
    #achievement-notification .title {color:#fce045;font-size:20px;margin:27px 0 9px 0;}
    #achievement-notification .name {color:#eee;font-size:30px;margin:9px 0;}
}

@media screen and (max-width: 1500px) {
    .coin {width:48px;height:52px;}
    .achievement1 .coin {background-position:0 -444px;}
    .achievement2 .coin {background-position:-48px -444px;}
    .achievement3 .coin {background-position:-96px -444px;}
    .achievement4 .coin {background-position:-144px -444px;}
    .achievement5 .coin {background-position:-192px -444px;}
    .achievement6 .coin {background-position:-240px -444px;}
    .achievement7 .coin {background-position:-288px -444px;}
    .achievement8 .coin {background-position:-336px -444px;}
    .achievement9 .coin {background-position:-384px -444px;}
    .achievement10 .coin {background-position:-432px -444px;}
    .achievement11 .coin {background-position:-480px -444px;}
    .achievement12 .coin {background-position:-528px -444px;}
    .achievement13 .coin {background-position:-576px -444px;}
    .achievement14 .coin {background-position:-624px -444px;}
    .achievement15 .coin {background-position:-672px -444px;}
    .achievement16 .coin {background-position:-672px -548px;}
    .achievement17 .coin {background-position:-720px -444px;}
    .achievement18 .coin {background-position:-720px -548px;}
    .achievement19 .coin {background-position:-576px -548px;}
    .achievement20 .coin {background-position:-624px -548px;}
    .achievement21 .coin {background-position:-768px -444px;}
    .achievement22 .coin {background-position:-432px -548px;}
    .achievement23 .coin {background-position:-480px -548px;}
    .achievement24 .coin {background-position:-528px -548px;}
    .achievement25 .coin {background-position:-528px -548px;}
    .achievement25 .coin {background-position:-433px -600px;}
    .achievement26 .coin {background-position:-480px -600px;}
    .achievement27 .coin {background-position:-528px -600px;}
    .achievement28 .coin {background-position:-576px -600px;}
    .achievement29 .coin {background-position:-624px -600px;}
    .achievement30 .coin {background-position:-672px -600px;}
    .achievement31 .coin {background-position:-720px -600px;}
    .achievement32 .coin {background-position:-768px -600px;}
    .achievement33 .coin {background-position:-432px -652px;}
    .achievement34 .coin {background-position:-480px -652px;}
    .achievement35 .coin {background-position:-528px -652px;}
    .achievement36 .coin {background-position:-576px -652px;}
    .achievement37 .coin {background-position:-624px -652px;}
    .achievement38 .coin {background-position:-672px -652px;}
    .achievement39 .coin {background-position:-720px -652px;}
    .achievement40 .coin {background-position:-768px -652px;}
    .achievement41 .coin {background-position:-432px -704px;}
    .achievement42 .coin {background-position:-480px -704px;}
    .achievement43 .coin {background-position:-528px -704px;}
    .achievement44 .coin {background-position:-576px -704px;}
    .achievement45 .coin {background-position:0 -608px;}
    .achievement46 .coin {background-position:-48px -608px;}
    .achievement47 .coin {background-position:-96px -608px;}
    .achievement48 .coin {background-position:-144px -608px;}
    .achievement49 .coin {background-position:-192px -608px;}
    .achievement50 .coin {background-position:-240px -608px;}
    .achievement51 .coin {background-position:-288px -608px;}
    .achievement52 .coin {background-position:-336px -608px;}
    .achievement53 .coin {background-position:-384px -608px;}
    .achievement54 .coin {background-position:0 -660px;}
    .achievement55 .coin {background-position:-48px -660px;}
    .achievement56 .coin {background-position:-96px -660px;}
    .achievement57 .coin {background-position:-144px -660px;}
    .achievement58 .coin {background-position:-192px -660px;}
    .achievement59 .coin {background-position:-240px -660px;}
    .achievement60 .coin {background-position:-288px -660px;}
    .achievement61 .coin {background-position:-336px -660px;}
    .achievement62 .coin {background-position:-384px -660px;}
    .achievement63 .coin {background-position:0 -712px;}
    .achievement64 .coin {background-position:-48px -712px;}
    .achievement65 .coin {background-position:-96px -712px;}
    .achievement66 .coin {background-position:-144px -712px;}
    .achievement67 .coin {background-position:-192px -712px;}
    .achievement68 .coin {background-position:-240px -712px;}
    .achievement69 .coin {background-position:-288px -712px;}
    .achievement70 .coin {background-position:-336px -712px;}
    .achievement71 .coin {background-position:-384px -712px;}
    .achievement72 .coin {background-position:0 -764px;}
    .achievement73 .coin {background-position:-48px -764px;}
    .achievement74 .coin {background-position:-96px -764px;}
    .achievement75 .coin {background-position:-144px -764px;}
    .achievement76 .coin {background-position:-192px -764px;}
    .achievement77 .coin {background-position:-240px -764px;}
    .achievement78 .coin {background-position:-288px -764px;}
    .achievement79 .coin {background-position:-336px -764px;}
    .achievement80 .coin {background-position:-384px -764px;}

    #achievements-wrapper {height:258px;width:744px;margin:30px 0 10px 40px;}
    #achievements ul {float:left;margin-left:40px;}
    #achievements nav {height:44px;width:134px;margin:0 auto;}
    #previous, #next {height:44px;width:68px;display:inline-block;}
    .page1 #previous, .upscaled .page1 #previous {background-position:0px -564px;}
    .page20 #next, .upscaled .page20 #next {background-position:-66px -564px;}
    #previous, .upscaled #previous {background-position:-134px -564px;}
    #previous:active, .upscaled #previous:active {background-position:-268px -564px;}
    #next, .upscaled #next {margin-left:-10px;background-position:-200px -564px;}
    #next:active, .upscaled #next:active {background-position:-334px -564px;}
    
    .page1 #previous:hover, .page1 #previous:active {background-position:0px -564px;}
    .page20 #next:hover, .page20 #next:active {background-position:-66px -564px}
    
    #lists {width:16000px;}
    #achievements.page1 #lists {left:0;}
    #achievements.page2 #lists {left:-784px;}
    #achievements.page3 #lists {left:-1568px;}
    #achievements.page4 #lists {left:-2352px;}
    #achievements.page5 #lists {left:-3136px;}
    #achievements.page6 #lists {left:-3920px;}
    #achievements.page7 #lists {left:-4704px;}
    #achievements.page8 #lists {left:-5488px;}
    #achievements.page9 #lists {left:-6272px;}
    #achievements.page10 #lists {left:-7056px;}
    #achievements.page11 #lists {left:-7840px;}
    #achievements.page12 #lists {left:-8624px;}
    #achievements.page13 #lists {left:-9408px;}
    #achievements.page14 #lists {left:-10192px;}
    #achievements.page15 #lists {left:-10976px;}
    #achievements.page16 #lists {left:-11760px;}
    #achievements.page17 #lists {left:-12544px;}
    #achievements.page18 #lists {left:-13328px;}
    #achievements.page19 #lists {left:-14112px;}
    #achievements.page20 #lists {left:-14896px;}

    #achievements-count {margin:12px 0 0 48px;}
    #achievements-potion-count {margin:12px 48px 0 0;}
    #achievements-unlocks-count, #potion-count {margin-bottom: 12px;}
    #achievements-unlocks-count {height: 20px;}

    .item-gem {background-position:0 0; width: 14px; height: 12px;}
    #gem-ruby.active {background-position:-14px 0px;}
    #gem-emerald.active {background-position:-28px 0px;}
    #gem-amethyst.active {background-position:-42px 0px;}
    #gem-topaz.active {background-position:-56px 0px;}
    #gem-sapphire.active {background-position:-70px 0px;}
    .item-potion {background-position:0 -12px; width: 14px; height: 20px}
    .item-potion.active {background-position:-14px -12px;}
    .item-potion.ban.active {background-position:-28px -12px;}

    #achievements, #achievements li, #achievements .coin, #achievement-notification, #achievement-notification .coin, #coinsparks, .upscaled #coinsparks, .achievement-sharing a, #previous, #next {background-size:832px;}
    #achievements {height:392px;width:832px;margin-left:-416px;margin-top:-216px;font-size:20px;}
    #achievements li, .upscaled #achievements li {height:52px;width:744px;background-position:0 -392px;margin:10px 0;}
    #achievements li .coin {margin-right:20px;}
    .achievement-sharing {right:16px;top:16px;}
    .achievement-sharing .facebook {height:22px;width:10px;background-position:-744px -392px;}
    .achievement-sharing .facebook:hover {background-position:-744px -414px;}
    .achievement-sharing .twitter, .upscaled .achievement-sharing .twitter {height:22px;width:32px;background-position:-754px -392px;margin-left:10px;}
    .achievement-sharing .twitter:hover, .upscaled .achievement-sharing .twitter:hover {background-position:-754px -414px;}
    
    #achievement-notification, .upscaled #achievement-notification {width:432px;bottom:44px;height:0;margin-left:-216px;background-position:0 -496px;}
    #achievement-notification.active {height:68px;}
    #achievement-notification .coin {position:absolute;top:-40px;left:50%;margin-left:-24px;opacity:0;}
    #achievement-notification.active .coin {opacity:1;}
    #achievement-notification.active #coinsparks, .upscaled #achievement-notification.active #coinsparks {
        height:52px;width:48px;
        -moz-animation:coinsparks2 0.8s steps(6, end) 7;
        -webkit-animation:coinsparks2 0.8s steps(6, end) 7;
        -o-animation:coinsparks2 0.8s steps(6, end) 7;
        -ms-animation:coinsparks2 0.8s steps(6, end) 7;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
    }
    #achievement-notification .title {color:#fce045;font-size:14px;margin:18px 0 6px 0;}
    #achievement-notification .name {color:#eee;font-size:20px;margin:6px 0;}
}

@media screen and (max-width: 1000px) {
    .coin {width:24px;height:26px;}
    .achievement1 .coin {background-position:0 -222px;}
    .achievement2 .coin {background-position:-24px -222px;}
    .achievement3 .coin {background-position:-48px -222px;}
    .achievement4 .coin {background-position:-72px -222px;}
    .achievement5 .coin {background-position:-96px -222px;}
    .achievement6 .coin {background-position:-120px -222px;}
    .achievement7 .coin {background-position:-144px -222px;}
    .achievement8 .coin {background-position:-168px -222px;}
    .achievement9 .coin {background-position:-192px -222px;}
    .achievement10 .coin {background-position:-216px -222px;}
    .achievement11 .coin {background-position:-240px -222px;}
    .achievement12 .coin {background-position:-264px -222px;}
    .achievement13 .coin {background-position:-288px -222px;}
    .achievement14 .coin {background-position:-312px -222px;}
    .achievement15 .coin {background-position:-336px -222px;}
    .achievement16 .coin {background-position:-336px -274px;}
    .achievement17 .coin {background-position:-360px -222px;}
    .achievement18 .coin {background-position:-360px -274px;}
    .achievement19 .coin {background-position:-288px -274px;}
    .achievement20 .coin {background-position:-312px -274px;}
    .achievement21 .coin {background-position:-384px -222px;}
    .achievement22 .coin {background-position:-216px -274px;}
    .achievement23 .coin {background-position:-240px -274px;}
    .achievement24 .coin {background-position:-264px -274px;}
    .achievement25 .coin {background-position:-216px -300px;}
    .achievement26 .coin {background-position:-240px -300px;}
    .achievement27 .coin {background-position:-264px -300px;}
    .achievement28 .coin {background-position:-288px -300px;}
    .achievement29 .coin {background-position:-312px -300px;}
    .achievement30 .coin {background-position:-336px -300px;}
    .achievement31 .coin {background-position:-360px -300px;}
    .achievement32 .coin {background-position:-384px -300px;}
    .achievement33 .coin {background-position:-216px -326px;}
    .achievement34 .coin {background-position:-240px -326px;}
    .achievement35 .coin {background-position:-264px -326px;}
    .achievement36 .coin {background-position:-288px -326px;}
    .achievement37 .coin {background-position:-312px -326px;}
    .achievement38 .coin {background-position:-336px -326px;}
    .achievement39 .coin {background-position:-360px -326px;}
    .achievement40 .coin {background-position:-384px -326px;}
    .achievement41 .coin {background-position:-216px -352px;}
    .achievement42 .coin {background-position:-240px -352px;}
    .achievement43 .coin {background-position:-264px -352px;}
    .achievement44 .coin {background-position:-288px -352px;}
    .achievement45 .coin {background-position:0 -304px;}
    .achievement46 .coin {background-position:-24px -304px;}
    .achievement47 .coin {background-position:-48px -304px;}
    .achievement48 .coin {background-position:-72px -304px;}
    .achievement49 .coin {background-position:-96px -304px;}
    .achievement50 .coin {background-position:-120px -304px;}
    .achievement51 .coin {background-position:-144px -304px;}
    .achievement52 .coin {background-position:-168px -304px;}
    .achievement53 .coin {background-position:-192px -304px;}
    .achievement54 .coin {background-position:0 -330px;}
    .achievement55 .coin {background-position:-24px -330px;}
    .achievement56 .coin {background-position:-48px -330px;}
    .achievement57 .coin {background-position:-72px -330px;}
    .achievement58 .coin {background-position:-96px -330px;}
    .achievement59 .coin {background-position:-120px -330px;}
    .achievement60 .coin {background-position:-144px -330px;}
    .achievement61 .coin {background-position:-168px -330px;}
    .achievement62 .coin {background-position:-192px -330px;}
    .achievement63 .coin {background-position:0 -356px;}
    .achievement64 .coin {background-position:-24px -356px;}
    .achievement65 .coin {background-position:-48px -356px;}
    .achievement66 .coin {background-position:-72px -356px;}
    .achievement67 .coin {background-position:-96px -356px;}
    .achievement68 .coin {background-position:-120px -356px;}
    .achievement69 .coin {background-position:-144px -356px;}
    .achievement70 .coin {background-position:-168px -356px;}
    .achievement71 .coin {background-position:-192px -356px;}
    .achievement72 .coin {background-position:0 -372px;}
    .achievement73 .coin {background-position:-24px -372px;}
    .achievement74 .coin {background-position:-48px -372px;}
    .achievement75 .coin {background-position:-72px -372px;}
    .achievement76 .coin {background-position:-96px -372px;}
    .achievement77 .coin {background-position:-120px -372px;}
    .achievement78 .coin {background-position:-144px -372px;}
    .achievement79 .coin {background-position:-168px -372px;}
    .achievement80 .coin {background-position:-192px -372px;}

    #achievements-wrapper {height:129px;width:372px;margin:10px 0 10px 20px;}
    #achievements ul {float:left;margin-left:20px;}
    #achievements nav {height:22px;width:68px;margin:0 auto;}
    #previous, #next {height:22px;width:34px;display:inline-block;}
    .page1 #previous, .upscaled .page1 #previous {background-position:0px -282px;}
    .page20 #next, .upscaled .page20 #next {background-position:-33px -282px;}
    #previous, .upscaled #previous {background-position:-67px -282px;}
    #previous:active, .upscaled #previous:active {background-position:-134px -282px;}
    #next, .upscaled #next {margin-left:-5px;background-position:-100px -282px;}
    #next:active, .upscaled #next:active {background-position:-167px -282px;}
    
    .page1 #previous:hover, .page1 #previous:active {background-position:0px -282px;}
    .page20 #next:hover, .page20 #next:active {background-position:-33px -282px}
    
    #lists {width:8000px;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
    #achievements.page1 #lists {left:0;}
    #achievements.page2 #lists {left:-392px;}
    #achievements.page3 #lists {left:-784px;}
    #achievements.page4 #lists {left:-1176px;}
    #achievements.page5 #lists {left:-1568px;}
    #achievements.page6 #lists {left:-1960px;}
    #achievements.page7 #lists {left:-2352px;}
    #achievements.page8 #lists {left:-2744px;}
    #achievements.page9 #lists {left:-3136px;}
    #achievements.page10 #lists {left:-3528px;}
    #achievements.page11 #lists {left:-3920px;}
    #achievements.page12 #lists {left:-4312px;}
    #achievements.page13 #lists {left:-4704px;}
    #achievements.page14 #lists {left:-5096px;}
    #achievements.page15 #lists {left:-5488px;}
    #achievements.page16 #lists {left:-5880px;}
    #achievements.page17 #lists {left:-6272px;}
    #achievements.page18 #lists {left:-6664px;}
    #achievements.page19 #lists {left:-7056px;}
    #achievements.page20 #lists {left:-7448px;}

    #achievements-count {margin:0 0 0 24px;}
    #achievements-potion-count {margin:0 24px 0 0;}
    #achievements-unlocks-count, #potion-count {margin-bottom: 6px;}
    #achievements-unlocks-count {height: 10px;}

    .item-gem {background-position:0px 0px; width: 7px; height: 6px;}
    #gem-ruby.active {background-position:-7px 0px;}
    #gem-emerald.active {background-position:-14px 0px;}
    #gem-amethyst.active {background-position:-21px 0px;}
    #gem-topaz.active {background-position:-28px 0px;}
    #gem-sapphire.active {background-position:-35px 0px;}
    .item-potion {background-position:0 -6px; width: 7px; height: 10px}
    .item-potion.active {background-position:-7px -6px;}
    .item-potion.ban.active {background-position:-14px -12px;}

    #achievements-unlocks-count > div { margin-right: 6px; }
    #potion-count > div { margin-left: 6px; }
    
    #achievements, #achievements li, #achievements .coin, #achievement-notification, #achievement-notification .coin, #coinsparks, .achievement-sharing a, #previous, #next {background-size:416px !important;}
    #achievements {height:196px;width:416px;margin-left:-208px;margin-top:-108px;font-size:10px;}
    #achievements li, .upscaled #achievements li {height:26px;width:372px;background-position:0 -196px;margin:5px 0;}
    #achievements li .coin {margin-right:10px;}
    .achievement-sharing {right:8px;top:8px;}
    .achievement-sharing .facebook {height:11px;width:5px;background-position:-372px -196px;}
    .achievement-sharing .facebook:hover {background-position:-372px -207px;}
    .achievement-sharing .twitter, .upscaled .achievement-sharing .twitter {height:11px;width:16px;background-position:-377px -196px;margin-left:5px;}
    .achievement-sharing .twitter:hover, .upscaled .achievement-sharing .twitter:hover {background-position:-377px -207px;}

    #achievement-notification, .upscaled #achievement-notification {width:216px;bottom:36px;height:0;margin-left:-108px;background-position:0 -248px;}
    #achievement-notification.active {height:34px;}
    #achievement-notification .coin {position:absolute;top:-20px;left:50%;margin-left:-12px;opacity:0;}
    #achievement-notification.active .coin {opacity:1;}
    #achievement-notification.active #coinsparks, .upscaled #achievement-notification.active #coinsparks {
        height:26px;width:24px;
        -moz-animation:coinsparks1 0.8s steps(6, end) 7;
        -webkit-animation:coinsparks1 0.8s steps(6, end) 7;
        -o-animation:coinsparks1 0.8s steps(6, end) 7;
        -ms-animation:coinsparks1 0.8s steps(6, end) 7;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
    }
    #achievement-notification .title {color:#fce045;font-size:10px;margin:9px 0 3px 0;}
    #achievement-notification .name {color:#eee;font-size:10px;margin:3px 0;}
}

@media screen and (max-width: 600px) {
    #achievement-notification .coin {width:48px;height:52px;}
    #achievement-notification.achievement1 .coin {background-position:0 -444px;}
    #achievement-notification.achievement2 .coin {background-position:-48px -444px;}
    #achievement-notification.achievement3 .coin {background-position:-96px -444px;}
    #achievement-notification.achievement4 .coin {background-position:-144px -444px;}
    #achievement-notification.achievement5 .coin {background-position:-192px -444px;}
    #achievement-notification.achievement6 .coin {background-position:-240px -444px;}
    #achievement-notification.achievement7 .coin {background-position:-288px -444px;}
    #achievement-notification.achievement8 .coin {background-position:-336px -444px;}
    #achievement-notification.achievement9 .coin {background-position:-384px -444px;}
    #achievement-notification.achievement10 .coin {background-position:-432px -444px;}
    #achievement-notification.achievement11 .coin {background-position:-480px -444px;}
    #achievement-notification.achievement12 .coin {background-position:-528px -444px;}
    #achievement-notification.achievement13 .coin {background-position:-576px -444px;}
    #achievement-notification.achievement14 .coin {background-position:-624px -444px;}
    #achievement-notification.achievement15 .coin {background-position:-672px -444px;}
    #achievement-notification.achievement16 .coin {background-position:-672px -548px;}
    #achievement-notification.achievement17 .coin {background-position:-720px -444px;}
    #achievement-notification.achievement18 .coin {background-position:-720px -548px;}
    #achievement-notification.achievement19 .coin {background-position:-576px -548px;}
    #achievement-notification.achievement20 .coin {background-position:-624px -548px;}
    #achievement-notification.achievement21 .coin {background-position:-1152px -444px;}
    #achievement-notification.achievement22 .coin {background-position:-648px -548px;}
    #achievement-notification.achievement23 .coin {background-position:-720px -548px;}
    #achievement-notification.achievement24 .coin {background-position:-792px -548px;}
    #achievement-notification.achievement25 .coin {background-position:-433px -600px;}
    #achievement-notification.achievement26 .coin {background-position:-480px -600px;}
    #achievement-notification.achievement27 .coin {background-position:-528px -600px;}
    #achievement-notification.achievement28 .coin {background-position:-576px -600px;}
    #achievement-notification.achievement29 .coin {background-position:-624px -600px;}
    #achievement-notification.achievement30 .coin {background-position:-672px -600px;}
    #achievement-notification.achievement31 .coin {background-position:-720px -600px;}
    #achievement-notification.achievement32 .coin {background-position:-768px -600px;}
    #achievement-notification.achievement33 .coin {background-position:-432px -652px;}
    #achievement-notification.achievement34 .coin {background-position:-480px -652px;}
    #achievement-notification.achievement35 .coin {background-position:-528px -652px;}
    #achievement-notification.achievement36 .coin {background-position:-576px -652px;}
    #achievement-notification.achievement37 .coin {background-position:-624px -652px;}
    #achievement-notification.achievement38 .coin {background-position:-672px -652px;}
    #achievement-notification.achievement39 .coin {background-position:-720px -652px;}
    #achievement-notification.achievement40 .coin {background-position:-768px -648px;}
    #achievement-notification.achievement41 .coin {background-position:-432px -704px;}
    #achievement-notification.achievement42 .coin {background-position:-480px -704px;}
    #achievement-notification.achievement43 .coin {background-position:-528px -704px;}
    #achievement-notification.achievement44 .coin {background-position:-576px -704px;}
    #achievement-notification.achievement45 .coin {background-position:0 -608px;}
    #achievement-notification.achievement46 .coin {background-position:-48px -608px;}
    #achievement-notification.achievement47 .coin {background-position:-96px -608px;}
    #achievement-notification.achievement48 .coin {background-position:-144px -608px;}
    #achievement-notification.achievement49 .coin {background-position:-192px -608px;}
    #achievement-notification.achievement50 .coin {background-position:-240px -608px;}
    #achievement-notification.achievement51 .coin {background-position:-288px -608px;}
    #achievement-notification.achievement52 .coin {background-position:-336px -608px;}
    #achievement-notification.achievement53 .coin {background-position:-384px -608px;}
    #achievement-notification.achievement54 .coin {background-position:0 -660px;}
    #achievement-notification.achievement55 .coin {background-position:-48px -660px;}
    #achievement-notification.achievement56 .coin {background-position:-96px -660px;}
    #achievement-notification.achievement57 .coin {background-position:-144px -660px;}
    #achievement-notification.achievement58 .coin {background-position:-192px -660px;}
    #achievement-notification.achievement59 .coin {background-position:-240px -660px;}
    #achievement-notification.achievement60 .coin {background-position:-288px -660px;}
    #achievement-notification.achievement61 .coin {background-position:-336px -660px;}
    #achievement-notification.achievement62 .coin {background-position:-384px -660px;}
    #achievement-notification.achievement63 .coin {background-position:0 -712px;}
    #achievement-notification.achievement64 .coin {background-position:-48px -712px;}
    #achievement-notification.achievement65 .coin {background-position:-96px -712px;}
    #achievement-notification.achievement66 .coin {background-position:-144px -712px;}
    #achievement-notification.achievement67 .coin {background-position:-192px -712px;}
    #achievement-notification.achievement68 .coin {background-position:-240px -712px;}
    #achievement-notification.achievement69 .coin {background-position:-288px -712px;}
    #achievement-notification.achievement70 .coin {background-position:-336px -712px;}
    #achievement-notification.achievement71 .coin {background-position:-384px -712px;}
    #achievement-notification.achievement72 .coin {background-position:0 -762px;}
    #achievement-notification.achievement73 .coin {background-position:-48px -762px;}
    #achievement-notification.achievement74 .coin {background-position:-96px -762px;}
    #achievement-notification.achievement75 .coin {background-position:-144px -762px;}
    #achievement-notification.achievement76 .coin {background-position:-192px -762px;}
    #achievement-notification.achievement77 .coin {background-position:-240px -762px;}
    #achievement-notification.achievement78 .coin {background-position:-288px -762px;}
    #achievement-notification.achievement79 .coin {background-position:-336px -762px;}
    #achievement-notification.achievement80 .coin {background-position:-384px -762px;}
    
    #achievements nav {height:22px;width:68px;margin:0 auto;}
    #previous, #next {height:22px;width:34px;display:inline-block;}
    .page1 #previous, .upscaled .page1 #previous {background-position:0px -282px;}
    .page20 #next, .upscaled .page20 #next {background-position:-33px -282px;}
    #previous, .upscaled #previous {background-position:-67px -282px;}
    #previous:active, .upscaled #previous:active {background-position:-134px -282px;}
    #next, .upscaled #next {margin-left:-5px;background-position:-100px -282px;}
    #next:active, .upscaled #next:active {background-position:-167px -282px;}
    
    .page1 #previous:hover, .page1 #previous:active {background-position:0px -282px;}
    .page20 #next:hover, .page20 #next:active {background-position:-33px -282px}
    
    #lists {width:8000px;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
    #achievements.page1 #lists {left:0;}
    #achievements.page2 #lists {left:-392px;}
    #achievements.page3 #lists {left:-784px;}
    #achievements.page4 #lists {left:-1176px;}
    #achievements.page5 #lists {left:-1568px;}
    #achievements.page6 #lists {left:-1960px;}
    #achievements.page7 #lists {left:-2352px;}
    #achievements.page8 #lists {left:-2744px;}
    #achievements.page9 #lists {left:-3136px;}
    #achievements.page10 #lists {left:-3528px;}
    #achievements.page11 #lists {left:-3920px;}
    #achievements.page12 #lists {left:-4312px;}
    #achievements.page13 #lists {left:-4704px;}
    #achievements.page14 #lists {left:-5096px;}
    #achievements.page15 #lists {left:-5488px;}
    #achievements.page16 #lists {left:-5880px;}
    #achievements.page17 #lists {left:-6272px;}
    #achievements.page18 #lists {left:-6664px;}
    #achievements.page19 #lists {left:-7056px;}
    #achievements.page20 #lists {left:-7448px;}
    
    #achievements-count {margin:0 0 0 24px;}
    #achievements-potion-count {margin:0 24px 0 0;}
    #achievements-unlocks-count, #potion-count {margin-bottom: 6px;}
    #achievements-unlocks-count {height: 20px;}

    .item-gem {background-position:0 0; width: 14px; height: 12px;}
    #gem-ruby.active {background-position:-14px 0px;}
    #gem-emerald.active {background-position:-28px 0px;}
    #gem-amethyst.active {background-position:-42px 0px;}
    #gem-topaz.active {background-position:-56px 0px;}
    #gem-sapphire.active {background-position:-70px 0px;}
    .item-potion {background-position:0 -6px; width: 7px; height: 10px}
    .item-potion.active {background-position:-7px -6px;}
    .item-potion.ban.active {background-position:-14px -12px;}

    #achievement-notification, #achievement-notification .coin, #coinsparks {background-size:832px;}
    #achievement-notification, .upscaled #achievement-notification {width:432px;bottom:34px;height:0;margin-left:-216px;background-position:0 -496px;}
    #achievement-notification.active {height:68px;}
    #achievement-notification .coin {position:absolute;top:-40px;left:50%;margin-left:-24px;opacity:0;}
    #achievement-notification.active .coin {opacity:1;}
    #achievement-notification.active #coinsparks {display:none;}
    #achievement-notification .title {color:#fce045;font-size:14px;margin:18px 0 6px 0;}
    #achievement-notification .name {color:#eee;font-size:20px;margin:6px 0;}
    
    #achievements li.unlocked .achievement-sharing {display:block;}
}
#inspector {
  font-family: "GraphicPixel";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin-left: 0;
  padding: 0;
  display: none;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

#inspector .name-wrapper {
  background-color: rgba(0, 0, 0, 0.43);
  min-width: 200px;
  height: 26px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#inspector .name {
  color: #e3e3e3;

  z-index: 2;
  position: relative;
  padding: 0 10px;
  margin-top: -2px;
}

#inspector .name.mob {
  text-transform: capitalize;
}

#inspector .name.is-boss {
  color: #d3c59c;
}

#inspector .health.is-mini-boss {
  background: rgba(101, 0, 80, 0.75);
}

#inspector .level {
  z-index: 2;
  position: relative;
  color: #e3e3e3;
}

#inspector .health {
  height: 100%;
  width: 100%;
  background: rgba(132, 0, 0, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#inspector .enchants,
#inspector .resistances {
  margin-top: 3px;
  font-size: 11px;
  text-shadow: 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
  color: #fff;
}

#inspector .enchants span {
  display: inline-block;
  text-transform: capitalize;
  color: #f3e5bb;
  padding: 0 3px;
}

#inspector .resistances span {
  display: inline-block;
  padding: 0 3px;
}

#inspector .resistances .lightningDamage {
  color: #bfc2db;
}
#inspector .resistances .flameDamage {
  color: orange;
}
#inspector .resistances .coldDamage {
  color: #55a3ff;
}
#inspector .resistances .magicDamage {
  color: #d16afa;
}

@media screen and (min-width: 1501px) {
  #inspector {
    top: 20px;
  }

  #inspector .enchants,
  #inspector .resistances {
    font-size: 13px;
  }
}

.store-wrapper {
  font-family: "GraphicPixel";
}

.item-wrapper {
  align-self: center;
  width: 33.33%;
  padding: 0 10px;
}
.item-wrapper-large {
  width: 66.66%;
}
.item-wrapper-full {
  width: 100%;
}

#store .btn {
  line-height: 0.85;
}

#store .btn small {
  font-size: 0.75em;
}
.item-icon {
  border-radius: 4px;
  border: solid 2px #928f8c;
  background: #171717;
  display: inline-block;
  padding: 3px;
  background-color: inherit;
  position: relative;
}

.scrollupgradesacred,
.scrollupgradelegendary,
.petegg,
.scrollupgradeblessed,
.scrollupgradehigh,
.scrollupgrademedium,
.cape,
.cape7 {
  height: 100%;
}

#store-item-list,
#store-item-purchase {
  display: none;
}

#store-item-list.active,
#store-item-purchase.active {
  display: flex;
}

#store-item-purchase {
  justify-content: space-between;
}

#qrcode {
  background: #fff;
  position: relative;
  padding: 5px;
}

#qrcode > canvas {
  left: 5px;
}

#store .store-wrapper input {
  height: auto;
  font-size: 14px;
  padding: 5px;
  -moz-animation: none;
  -webkit-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
  color: #333;
  margin-top: 0;
}

.nano-account {
  word-break: break-all;
  user-select: all;
}

.note {
  color: #555;
}

.note-high-resolution {
  display: block;
}
.note-low-resolution {
  display: none;
}

.item-wrapper .name,
.item-wrapper .description {
  line-height: 1;
}

.or-line {
  width: 80%;
  text-align: center;
  border-bottom: 2px solid #777;
  line-height: 0.1em;
  margin: 6px auto;
  font-size: 0.75rem;
}

.or-line span {
  color: #777;
  background: #dbd8c4;
  padding: 0 10px;
}

.panel-notice {
  position: absolute;
  bottom: 20px;
  font-size: 11px;
  left: 0;
  right: 0;
}

.cape {
  background-image: url(../img/3/item-cape.png);
}

.cape7 {
  background-image: url(../img/3/item-cape7.png);
}

@media screen and (min-width: 1501px) {
  .store-wrapper {
    margin: -20px 20px 0;
  }

  .item-icon {
    width: 69px;
    height: 69px;
  }

  #store-item-list,
  #store-item-purchase {
    height: 360px;
  }

  .scrollupgradesacred,
  .scrollupgradelegendary,
  .petegg,
  .scrollupgradeblessed,
  .scrollupgradehigh,
  .scrollupgrademedium,
  .cape,
  .cape7 {
    background-position: 0px -5px;
    background-repeat: no-repeat;
    background-size: 440px;
  }

  .scrollupgradesacred {
    background-image: url(../img/3/item-scrollupgradesacred.png);
  }

  .scrollupgradelegendary {
    background-image: url(../img/3/item-scrollupgradelegendary.png);
  }

  .petegg {
    background-image: url(../img/3/item-petegg.png);
  }

  .scrollupgradeblessed {
    background-image: url(../img/3/item-scrollupgradeblessed.png);
  }

  .scrollupgradehigh {
    background-image: url(../img/3/item-scrollupgradehigh.png);
  }

  .scrollupgrademedium {
    background-image: url(../img/3/item-scrollupgrademedium.png);
  }

  #store .expansion1 {
    width: 69px;
    height: 69px;
    background-image: url("../img/3/waypoint.png");
  }

  #store .expansion2 .unlocked .voucher {
    width: 69px;
    height: 69px;
    background-image: url("../img/3/expansion2voucher.png");
  }

  #store .expansion1.locked,
  #store .expansion2.locked {
    background-position-x: -138px;
  }

  #store .expansion1.unlocked,
  #store .expansion2.unlocked {
    background-position-x: -69px;
  }

  #qrcode {
    height: 130px;
    width: 130px;
    margin: 10px auto;
  }

  .item-wrapper .title {
    font-size: 30px;
  }

  .item-wrapper .name {
    font-size: 25px;
  }

  .item-wrapper .description {
    font-size: 20px;
  }

  .item-wrapper .prices {
    font-size: 18px;
  }

  .nano-account {
    font-size: 18px;
  }

  .note {
    font-size: 16px;
  }

  .panel-notice {
    bottom: 40px;
  }

  #store-account-button {
    margin: 16px 0;
  }
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
  #store h1 {
    margin-bottom: 10px;
    margin-top: 20px;
  }

  #store-item-list,
  #store-item-purchase {
    height: 240px;
  }

  .store-wrapper {
    margin: -10px 10px 0;
  }
  .item-icon {
    width: 46px;
    height: 46px;
  }

  .scrollupgradesacred,
  .scrollupgradelegendary,
  .petegg,
  .scrollupgradeblessed,
  .scrollupgradehigh,
  .scrollupgrademedium,
  .cape,
  .cape7 {
    background-position: 0px -3px !important;
    background-size: auto !important;
  }

  .scrollupgradesacred {
    background-image: url(../img/3/item-scrollupgradesacred.png);
  }

  .scrollupgradelegendary {
    background-image: url(../img/3/item-scrollupgradelegendary.png);
  }

  .petegg {
    background-image: url(../img/3/item-petegg.png);
  }

  .scrollupgradeblessed {
    background-image: url(../img/3/item-scrollupgradeblessed.png);
  }

  .scrollupgradehigh {
    background-image: url(../img/3/item-scrollupgradehigh.png);
  }

  .scrollupgrademedium {
    background-image: url(../img/3/item-scrollupgrademedium.png);
  }

  #store .expansion1 {
    width: 46px;
    height: 46px;
    background-image: url("../img/2/waypoint.png");
    margin: 0 auto;
  }

  #store .expansion2 .voucher {
    width: 46px;
    height: 46px;
    background-image: url("../img/2/expansion2voucher.png");
  }

  #store .expansion1.locked {
    background-position-x: -46px;
  }
  #store .expansion2.locked {
    width: 46px;
    height: 46px;
    background-image: url("../img/2/expansion2voucher.png");
  }

  #store .expansion1.unlocked {
    background-position-x: -46px;
  }
  #store .expansion2.unlocked {
    width: 46px;
    height: 46px;
    background-image: url("../img/2/expansion2voucher.png");
  }

  #qrcode {
    height: 130px;
    width: 130px;
    margin: 10px auto;
  }

  .item-wrapper .title {
    font-size: 22px;
  }

  .item-wrapper .name {
    font-size: 17px;
    padding-bottom: 0;
  }

  .item-wrapper .description {
    font-size: 14px;
  }

  .item-wrapper .prices {
    font-size: 15px;
  }

  .nano-account {
    font-size: 12px;
  }

  .note {
    font-size: 12px;
  }

  .panel-notice {
    bottom: 20px;
  }

  #store-account-button {
    margin: 12px 0;
  }
}

@media screen and (max-width: 1000px) {
  #store h1 {
    display: none;
  }

  .store-wrapper {
    margin: 20px 10px 0;
  }

  .store-wrapper p {
    line-height: 1;
  }

  #store-item-list .description {
    display: none;
  }

  .item-icon {
    width: 23px;
    height: 23px;
  }

  .scrollupgradesacred,
  .scrollupgradelegendary,
  .petegg,
  .scrollupgradeblessed,
  .scrollupgradehigh,
  .scrollupgrademedium,
  .cape,
  .cape7 {
    background-size: 160px !important;
  }

  #store-item-list,
  #store-item-purchase {
    height: 120px;
  }

  #qrcode {
    display: none;
  }

  #store .expansion1,
  #store .expansion2 {
    width: 23px;
    height: 23px;
    background-image: url("../img/1/waypoint.png");
    transform: scale(1.3);
  }

  #store .expansion1.locked,
  #store .expansion2.locked {
    background-position-x: -46px;
  }

  #store .expansion1.unlocked,
  #store .expansion2.unlocked {
    background-position-x: -23px;
  }

  .item-wrapper .title {
    font-size: 15px;
  }

  .item-wrapper .name {
    font-size: 13px;
  }

  .item-wrapper .description {
    font-size: 10px;
  }

  .item-wrapper .prices {
    font-size: 15px;
  }

  .nano-account {
    font-size: 12px;
  }

  .note {
    font-size: 10px;
  }

  .store-wrapper .btn {
    font-size: 12px;
    padding: 6px 22px;
    margin-top: 6px;
  }

  .note-high-resolution {
    display: none;
  }

  .note-low-resolution {
    display: block;
  }

  .panel-notice {
    bottom: 20px;
    font-size: 9px;
  }

  #store-account-button {
    margin: 12px 0;
  }

  .hide-on-mobile {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  #store h1 {
    display: none;
  }

  .store-wrapper {
    margin: 20px 5px 0;
  }

  .panel-notice {
    font-size: 10px;
  }

  .store-wrapper .prices .usd {
    display: none;
  }

  .item-wrapper.item-name-scrollupgrademedium {
    display: none;
  }

  .hide-on-mobile {
    display: none;
  }

  .nano-account {
    font-size: 11px;
  }

  .panel-notice {
    bottom: 10px;
  }
}

@media screen and (max-width: 800px) and (orientation: portrait) {
}

@media screen and (max-width: 640px) and (orientation: portrait) {
}

#party-player-list {
  position: absolute;
  top: 10%;
  right: 5%;
}

#party-player-list > div {
  margin-bottom: 12px;
}

.player-name {
  color: #fff;
  font-family: "GraphicPixel";
  text-shadow: 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
}

.player-name.self {
  color: #fcda5c;
}

.player-name .party-leader {
  position: absolute;
  left: -24px;
}

.player-health-bar-container {
  width: 100px;
  height: 9px;
  position: relative;
  margin-top: 4px;
}

.player-health-bar-container > div {
  position: absolute;
  top: 0;
  left: 0;
}

.player-health-bar {
  height: 100%;
  width: 100%;
  background-image: url(../img/1/barsheet.png);
  background-position: -1px -69px;
}

.player-health {
  width: 100%;
  height: 100%;
  background: #d83939;
  border-radius: 6px;
}

#other-players {
  overflow-y: scroll;
  padding: 0 6px;
}

#party-players .row,
#other-players .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

#party-players .row.row-around,
#other-players .row.row-around {
  justify-content: space-around;
}

.party-panel {
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
}

.party-panel > div {
  width: 46%;
}

.party-panel .party {
  text-shadow: 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
}

.party-header {
  color: #777;
}

.party-empty {
  margin-top: 20px;
}

.player-name {
  margin: 3px 0;
  position: relative;
}

.party-separator {
  width: 1px !important;
  border-left: dotted 3px #c7c4ac;
}

.chat-mod-icon {
  display: inline-block;
  width: 20px; /* Updated width */
  height: 20px; /* Updated height */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239B59B6' d='M 19.487 5.126 L 10.487 0.126 C 10.184 -0.042 9.81798 -0.042 9.51498 0.126 L 0.514977 5.126 C 0.197977 5.302 0.000976562 5.636 0.000976562 5.999 C 0.000976562 6.693 0.114977 22.999 10.001 22.999 C 19.887 22.999 20.001 6.693 20.001 5.999 C 20.001 5.636 19.804 5.302 19.487 5.126 Z M 10.001 5.999 C 11.382 5.999 12.501 7.118 12.501 8.499 C 12.501 9.88 11.382 10.999 10.001 10.999 C 8.61998 10.999 7.50098 9.88 7.50098 8.499 C 7.50098 7.118 8.61998 5.999 10.001 5.999 Z M 6.25098 16 C 6.25098 13.699 7.69998 12.25 10.001 12.25 C 12.302 12.25 13.751 13.699 13.751 16 H 6.25098 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(0.8);
}

#population .chat-mod-icon {
  transform: scale(0.8) translateY(5px);
}

.item-unique {
  color: #d3c59c;
}

.item-superior {
  color: #e700e7;
}

.settings-panel {
  display: flex;
  justify-content: space-around;
}

.settings-panel > div {
  width: 50%;
}

.setting .ui-slider-horizontal {
  height: 10px;
}

.setting .ui-slider-horizontal .ui-slider-handle {
  top: -8px;
}

.setting .ui-slider .ui-slider-handle {
  height: 22px;
  line-height: 21px;
}

#music-slider,
#sound-slider,
#cape-hue-slider,
#cape-saturate-slider,
#cape-contrast-slider,
#cape-brightness-slider {
  margin: 3px auto;
  width: 60%;
}

#skill-attack::before,
#skill-defense::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

#skill-attack.disabled::before,
#skill-defense.disabled::before {
  filter: grayscale(100%);
}

@media screen and (min-width: 1501px) {
  #skill-attack,
  #skill-defense {
    width: 42px;
    height: 42px;
  }
  #skill-attack::before,
  #skill-defense::before {
    background-position: 0 -84px;
    background-image: url(../img/3/skills.png);
  }

  #skill-defense.skill-heal::before {
    background-position: 0 0;
  }
  #skill-defense.skill-defense::before {
    background-position: -42px 0;
  }
  #skill-defense.skill-resistances::before {
    background-position: -84px 0;
  }
  #skill-attack.skill-magic::before {
    background-position: -0 -42px;
  }
  #skill-attack.skill-flame::before {
    background-position: -42px -42px;
  }
  #skill-attack.skill-lightning::before {
    background-position: -84px -42px;
  }
  #skill-attack.skill-cold::before {
    background-position: -126px -42px;
  }
  #skill-attack.skill-poison::before {
    background-position: -168px -42px;
  }
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
  #skill-attack,
  #skill-defense {
    width: 28px;
    height: 28px;
  }

  #skill-attack::before,
  #skill-defense::before {
    background-position: 0 -56px;
    background-image: url(../img/2/skills.png);
  }

  #skill-defense.skill-heal::before {
    background-position: 0 0;
  }
  #skill-defense.skill-defense::before {
    background-position: -28px 0;
  }
  #skill-defense.skill-resistances::before {
    background-position: -56px 0;
  }
  #skill-attack.skill-magic::before {
    background-position: 0 -28px;
  }
  #skill-attack.skill-flame::before {
    background-position: -28px -28px;
  }
  #skill-attack.skill-lightning::before {
    background-position: -56px -28px;
  }
  #skill-attack.skill-cold::before {
    background-position: -84px -28px;
  }
  #skill-attack.skill-poison::before {
    background-position: -112px -28px;
  }
}

@media screen and (max-width: 600px) {
}

.skill-timeout {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.4);
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.skill-timeout.active {
  opacity: 1;
  width: 0%;
}

/*!
 * jQuery UI CSS Framework 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*!
 * jQuery UI Accordion 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/accordion/#theming
 */
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}

/*!
 * jQuery UI Autocomplete 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/autocomplete/#theming
 */
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}

/*!
 * jQuery UI Button 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/button/#theming
 */
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/*!
 * jQuery UI Checkboxradio 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/checkboxradio/#theming
 */

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}

/*!
 * jQuery UI Controlgroup 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/controlgroup/#theming
 */

.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}


/*!
 * jQuery UI Datepicker 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/datepicker/#theming
 */
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}

/*!
 * jQuery UI Dialog 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/dialog/#theming
 */
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}

/*!
 * jQuery UI Draggable 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}

/*!
 * jQuery UI Menu 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/menu/#theming
 */
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}

/*!
 * jQuery UI Progressbar 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/progressbar/#theming
 */
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}

/*!
 * jQuery UI Resizable 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}

/*!
 * jQuery UI Selectable 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}

/*!
 * jQuery UI Selectmenu 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/selectmenu/#theming
 */
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}

/*!
 * jQuery UI Sortable 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}

/*!
 * jQuery UI Slider 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/slider/#theming
 */
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}

/*!
 * jQuery UI Spinner 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/spinner/#theming
 */
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/*!
 * jQuery UI Tabs 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/tabs/#theming
 */
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}

/*!
 * jQuery UI Tooltip 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/tooltip/#theming
 */
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/*!
 * jQuery UI CSS Framework 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */

/*!
 * jQuery UI CSS Framework 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */


/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
	font-size: 1em/*{fsDefault}*/;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5/*{borderColorDefault}*/;
}
.ui-widget-content {
	border: 1px solid #dddddd/*{borderColorContent}*/;
	background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
	color: #333333/*{fcContent}*/;
}
.ui-widget-content a {
	color: #333333/*{fcContent}*/;
}
.ui-widget-header {
	border: 1px solid #dddddd/*{borderColorHeader}*/;
	background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
	color: #333333/*{fcHeader}*/;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333/*{fcHeader}*/;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5/*{borderColorDefault}*/;
	background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #454545/*{fcDefault}*/;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545/*{fcDefault}*/;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc/*{borderColorHover}*/;
	background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #2b2b2b/*{fcHover}*/;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b/*{fcHover}*/;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff/*{borderColorActive}*/;
	background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #ffffff/*{fcActive}*/;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff/*{borderColorActive}*/;
	background-color: #ffffff/*{fcActive}*/;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff/*{fcActive}*/;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e/*{borderColorHighlight}*/;
	background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
	color: #777620/*{fcHighlight}*/;
}
.ui-state-checked {
	border: 1px solid #dad55e/*{borderColorHighlight}*/;
	background: #fffa90/*{bgColorHighlight}*/;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620/*{fcHighlight}*/;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899/*{borderColorError}*/;
	background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/;
	color: #5f3f3f/*{fcError}*/;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f/*{fcError}*/;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f/*{fcError}*/;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/;
}
.ui-widget-header .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/;
}
.ui-button .ui-icon {
	background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
}

/* positioning */
/* Three classes needed to override `.ui-button:hover .ui-icon` */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
	background-image: none;
}
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px/*{cornerRadius}*/;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa/*{bgColorOverlay}*/ /*{bgImgUrlOverlay}*/ /*{bgOverlayXPos}*/ /*{bgOverlayYPos}*/ /*{bgOverlayRepeat}*/;
	opacity: .3/*{opacityOverlay}*/;
	-ms-filter: "alpha(opacity=30)"/*{opacityFilterOverlay}*/; /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
	box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
}

/*!
 * jQuery UI CSS Framework 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */

/*!
 * 
 * jQuery contextMenu v3.0.0-beta.2 - Plugin for simple contextMenu handling
 * 
 * Version: v3.0.0-beta.2
 * 
 * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
 * 
 * Web: http://swisnl.github.io/jQuery-contextMenu/
 * 
 * Copyright (c) 2011-2018 SWIS BV and contributors
 * 
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 * 
 * Date: 2018-03-16T11:21:00.512Z
 * 
 * 
 */@keyframes cm-spin{0%{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(359deg)}}@font-face{font-family:context-menu-icons;src:url("font/context-menu-icons.eot?4crg2");src:url("font/context-menu-icons.eot?4crg2#iefix") format("embedded-opentype"),url("font/context-menu-icons.woff2?4crg2") format("woff2"),url("font/context-menu-icons.woff?4crg2") format("woff"),url("font/context-menu-icons.ttf?4crg2") format("truetype");font-weight:400;font-style:normal}.context-menu-icon-add:before{content:"\EA01"}.context-menu-icon-copy:before{content:"\EA02"}.context-menu-icon-cut:before{content:"\EA03"}.context-menu-icon-delete:before{content:"\EA04"}.context-menu-icon-edit:before{content:"\EA05"}.context-menu-icon-loading:before{content:"\EA06"}.context-menu-icon-paste:before{content:"\EA07"}.context-menu-icon-quit:before{content:"\EA08"}.context-menu-icon:before{color:#2980b9;font-family:context-menu-icons;font-style:normal;font-weight:400;font-size:1em;left:0;line-height:1;position:absolute;text-align:center;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:2em}.context-menu-icon.context-menu-hover:before{color:#fff}.context-menu-icon.context-menu-disabled:before{color:#bbb}.context-menu-icon.context-menu-icon-loading:before{animation:cm-spin 2s infinite}.context-menu-icon.context-menu-icon--fa{display:list-item;font-family:inherit;line-height:inherit}.context-menu-icon.context-menu-icon--fa:before{color:#2980b9;font-family:FontAwesome;font-style:normal;font-weight:400;font-size:1em;left:0;line-height:1;position:absolute;text-align:center;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:2em}.context-menu-icon.context-menu-icon--fa.context-menu-hover:before{color:#fff}.context-menu-icon.context-menu-icon--fa.context-menu-disabled:before{color:#bbb}.context-menu-list{background:#fff;border:1px solid #bebebe;border-radius:.2em;box-shadow:0 2px 5px rgba(0,0,0,.5);display:inline-block;font-family:inherit;font-size:inherit;list-style-type:none;margin:.3em;max-width:26em;min-width:13em;padding:.25em 0;position:absolute}.context-menu-item{background-color:#fff;box-sizing:content-box;color:#2f2f2f;padding:.2em 2em;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.context-menu-separator{border-bottom:1px solid #e6e6e6;margin:.35em 0;padding:0}.context-menu-item>label>input,.context-menu-item>label>textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.context-menu-item.context-menu-hover{background-color:#2980b9;color:#fff;cursor:pointer}.context-menu-item.context-menu-disabled{background-color:#fff;color:#bbb;cursor:default}.context-menu-input.context-menu-hover{cursor:default;color:#2f2f2f}.context-menu-submenu:after{content:"";border-style:solid;border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #2f2f2f;height:0;position:absolute;right:.5em;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);width:0;z-index:1}.context-menu-item.context-menu-input{padding:.3em .6em}.context-menu-input>label>*{vertical-align:top}.context-menu-input>label>input[type=checkbox],.context-menu-input>label>input[type=radio]{margin-right:.4em;position:relative;top:.12em}.context-menu-input>label{margin:0}.context-menu-input>label,.context-menu-input>label>input[type=text],.context-menu-input>label>select,.context-menu-input>label>textarea{box-sizing:border-box;display:block;width:100%}.context-menu-input>label>textarea{height:7em}.context-menu-item>.context-menu-list{display:none;right:-.3em;top:.3em}.context-menu-item.context-menu-visible>.context-menu-list{display:block}.context-menu-accesskey{text-decoration:underline}
.context-menu-list {
  font-family: "GraphicPixel";
  background-color: rgba(64, 64, 64, 0.75);
  width: auto !important;
}

.context-menu-list .context-menu-item:first-child:not(.context-menu-disabled) {
  color: #fcda5c;
  text-align: center;
  padding: 0px 10px 4px;
}

.context-menu-item {
  background-color: transparent;
  color: #fff;
  padding: 4px 10px 6px;
}

.context-menu-item.context-menu-hover {
  cursor: url(../img/2/hand.png) 2 5, move;
  background-color: rgba(64, 64, 64, 0.75);
}

.context-menu-item.context-menu-disabled {
  cursor: url(../img/2/hand.png) 2 5, move;
  color: #bbb;
  background-color: transparent;
}

#otherplayer-name {
  font-size: 14px;
  padding-bottom: 6px;
}

#otherplayer-name var {
  color: #fcda5c;
  font-size: 16px;
}

.item-gold {
  display: flex;
  align-items: center;
  background: #171717;
  padding: 0 0 2px 2px;
  border-radius: 3px;
}

#gold-death-wrapper {
  display: none;
}

#gold-death-wrapper.visible {
  display: block;
}

#gold-death {
  font-weight: bold;
}

#inventory .gold-wrapper {
  align-self: end;
  flex-grow: 1;
  margin-bottom: 6px;
  margin-left: 2px;
  max-width: 120px;
}

#stash .gold-wrapper {
  padding: 0 11px 8px;
}

#trade .gold-wrapper {
  padding-top: 6px;
}

#stash .item-gold {
  max-width: 50%;
}

.gold-icon {
  margin-right: 6px;
}

#inventory.trade .panel-spaced-row div:not(:last-child),
#inventory.merchant .panel-spaced-row div:not(:last-child) {
  display: none;
}

.gold-amount {
  margin-top: 10px;
  color: #eed058;
}

.gold-amount.none {
  color: red;
}

@media screen and (min-width: 1501px) {
  .item-gold .gold-icon {
    width: 32px;
    height: 32px;
    background-image: url("../img/2/item-gold-3.png");
    background-position-y: -2px;
  }

  #inventory .gold-wrapper {
    max-width: 168px;
  }
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
  .item-gold .gold-icon {
    width: 16px;
    height: 16px;
    background-image: url("../img/1/item-gold-3.png");
    background-position-y: 0px;
  }

  .gold-icon {
    margin-right: 4px;
  }
}