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;
image-rendering:pixelated;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}
:focus{
outline:0;
}
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
@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;}
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;}
canvas{position:absolute;image-rendering:pixelated;will-change:transform;}
#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;}
body{
image-rendering:pixelated;
}
#background,
#foreground,
#high-tiles{
margin:0;
padding:0;
image-rendering:pixelated;
will-change:transform;
}
#achievements nav::selection{background:transparent;text-decoration:none;color:transparent;}
#canvas,#bar-container,#bubbles,#chatbox,#canvasborder,#foreground,#background,#high-tiles,footer,#container,#achievement-notification{user-select:none;-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);
}
.pixel-corners{
clip-path:polygon(
0px calc(100% - 10px),
2px calc(100% - 10px),
2px calc(100% - 6px),
4px calc(100% - 6px),
4px calc(100% - 4px),
6px calc(100% - 4px),
6px calc(100% - 2px),
10px calc(100% - 2px),
10px 100%,
calc(100% - 10px) 100%,
calc(100% - 10px) calc(100% - 2px),
calc(100% - 6px) calc(100% - 2px),
calc(100% - 6px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 6px),
calc(100% - 2px) calc(100% - 6px),
calc(100% - 2px) calc(100% - 10px),
100% calc(100% - 10px),
100% 10px,
calc(100% - 2px) 10px,
calc(100% - 2px) 6px,
calc(100% - 4px) 6px,
calc(100% - 4px) 4px,
calc(100% - 6px) 4px,
calc(100% - 6px) 2px,
calc(100% - 10px) 2px,
calc(100% - 10px) 0px,
10px 0px,
10px 2px,
6px 2px,
6px 4px,
4px 4px,
4px 6px,
2px 6px,
2px 10px,
0px 10px
);
}
.pixel-corners-sm{
clip-path:polygon(
0px calc(100% - 6px),
2px calc(100% - 6px),
2px calc(100% - 4px),
4px calc(100% - 4px),
4px calc(100% - 2px),
6px calc(100% - 2px),
6px 100%,
calc(100% - 6px) 100%,
calc(100% - 6px) calc(100% - 2px),
calc(100% - 4px) calc(100% - 2px),
calc(100% - 4px) calc(100% - 4px),
calc(100% - 2px) calc(100% - 4px),
calc(100% - 2px) calc(100% - 6px),
100% calc(100% - 6px),
100% 6px,
calc(100% - 2px) 6px,
calc(100% - 2px) 4px,
calc(100% - 4px) 4px,
calc(100% - 4px) 2px,
calc(100% - 6px) 2px,
calc(100% - 6px) 0px,
6px 0px,
6px 2px,
4px 2px,
4px 4px,
2px 4px,
2px 6px,
0px 6px
);
}
.pixel-corners-xs{
clip-path:polygon(
0px calc(100% - 4px),
2px calc(100% - 4px),
2px calc(100% - 2px),
4px calc(100% - 2px),
4px 100%,
calc(100% - 4px) 100%,
calc(100% - 4px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 4px),
100% calc(100% - 4px),
100% 2px,
calc(100% - 2px) 2px,
calc(100% - 2px) 0px,
4px 0px,
4px 2px,
2px 2px,
2px 4px,
0px 4px
);
}
.pixel-corners-2xs{
clip-path:polygon(
0px calc(100% - 2px),
2px calc(100% - 2px),
2px 100%,
calc(100% - 2px) 100%,
calc(100% - 2px) calc(100% - 2px),
100% calc(100% - 2px),
100% 2px,
calc(100% - 2px) 2px,
calc(100% - 2px) 0px,
2px 0px
);
}
.pixel-corners-top{
clip-path:polygon(
0px 100%,
100% 100%,
100% 4px,
calc(100% - 2px) 4px,
calc(100% - 2px) 2px,
calc(100% - 4px) 2px,
calc(100% - 4px) 0px,
4px 0px,
4px 2px,
2px 2px,
2px 4px,
0px 4px
);
}
.pixel-corners-bottom{
clip-path:polygon(
0px calc(100% - 4px),
2px calc(100% - 4px),
2px calc(100% - 2px),
4px calc(100% - 2px),
4px 100%,
calc(100% - 4px) 100%,
calc(100% - 4px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 2px),
calc(100% - 2px) calc(100% - 4px),
100% calc(100% - 4px),
100% 0px,
0px 0px
);
}
@media screen and (max-width:600px){
#entities{
cursor:default;
}
}
h1{font-weight:normal;}
.preload{display:none;}
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,.icon,#tilt,.parchment-left,.parchment-middle,.parchment-right,.avatar,.facebook,.twitter,.close,#note,.ribbon .top,.ribbon .bottom,.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{font-family:'GraphicPixel';}
#parchment input{width:20%;background:rgba(0,0,0,0.05);text-align:center;-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;animation:glow 0.5s linear infinite alternate;color:#eee;}
#parchment 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);}
#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;}
#parchment #settingsForm input{
margin-top:10px;
}
#settingsForm ul{
margin-top:20px;
margin-bottom:20px;
}
.play div{position:absolute;top:0;left:0;opacity:1;-moz-transition:0.4s linear opacity;-webkit-transition:0.4s linear opacity;-o-transition:0.4s linear opacity;-ms-transition:0.4s linear opacity;transition:0.4s linear opacity}
.play.disabled div{opacity:0;pointer-events:none;}
.play img{display:none;}
.play.loading img{display:block;position:absolute;top:54%;left:50%;}
#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{animation:invincible 0.3s steps(3,end) alternate infinite;-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;}
#fishingbar{background:url('../img/1/fishing.png');image-rendering:-moz-crisp-edges;position:absolute;top:15%;left:33%;z-index:50;display:none;pointer-events:none;cursor:pointer;}
#fishingbar.active{display:block;pointer-events:auto;}
#fishingbar.hold{display:block;pointer-events:none;}
#bullseye{color:gold;writing-mode:vertical-lr;text-orientation:upright;font-family:'GraphicPixel',sans-serif;display:none;align-items:center;justify-content:center;z-index:62;width:100%;height:100%;position:absolute;}
#bullseye.active{display:flex;}
#fishingtarget{background:#b0ff66;z-index:52}
#fishingtargetbullseye{background:rgb(100,255,255);z-index:54}
#fish-box{z-index:56;}
#fish-marker{background:url('../img/1/fishing.png');image-rendering:-moz-crisp-edges;position:absolute;z-index:58;}
#fish{z-index:60;}
#minigameprompt{overflow:hidden;position:absolute;top:35%;left:50%;display:none;cursor:none;background:url('../img/1/play.png') no-repeat center center / 100%;image-rendering:pixelated;animation:minigamebounce 2s infinite ease-in-out alternate;filter:saturate(5);}
#minigameprompt.active{display:block;pointer-events:auto;}
#minigameprompt:hover{filter:saturate(5);mask-image:url('../img/1/play.png');mask-size:cover;}
#minigameprompt:before{content:"";position:absolute;height:200%;width:400%;top:-200%;left:-150%;background:radial-gradient(transparent 40%,rgba(255,255,255,0.7) 60%,transparent 75%);transform-origin:bottom center;z-index:10;}
#minigameprompt:hover:before{animation:minigameglow 1.5s infinite forwards ease-in-out;}
#notifications{position:absolute;left:50%;text-align:center;font-family:'GraphicPixel';overflow:hidden;}
#notifications div{position:absolute;transition:none;-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;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
#playercount{font-family:'GraphicPixel';color:#e3e3e3;position:absolute;}
#playercount:hover{cursor:pointer;color:#FCE045;}
#population{background:url('../img/1/barsheet.png');border-radius:10px 0 0 0;image-rendering:-moz-crisp-edges;position:absolute;font-family:'GraphicPixel';color:#fff;text-align:center;opacity:0;pointer-events:none;-moz-transition:0.2s opacity linear,0.2s height ease;-webkit-transition:0.2s opacity linear,0.2s height ease;-o-transition:0.2s opacity linear,0.2s height ease;-ms-transition:0.2s opacity linear,0.2s height ease;transition:0.2s opacity linear,0.2s height ease;height:0;overflow:hidden;}
#population span:nth-child(1){color:#FCE045;}
#population.visible{opacity:1;pointer-events:auto;}
#time{
text-shadow:0 0 2px black;
position:absolute;
top:16px;
left:16px;
font-family:'GraphicPixel';
color:#e4d0b6;
font-size:12px;
z-index:2;
}
#armor,#weapon{
cursor:pointer;
}
#weaponStats{
position:absolute;
left:70px;
background:url(../img/1/barsheet.png);
background-position:-240px -48px;
width:91px;
color:#FFF;
font-family:'GraphicPixel';
font-size:9px;
text-align:center;
height:0;
opacity:0;
padding:20px;
padding-top:0;
transition:0.2s ease-in-out all;
bottom:18px;
border-image-width:8px;
}
#weaponStats.visible{
padding-top:5px;
margin-bottom:-5px;
opacity:100;
transition:0.2s ease-in-out all;
line-height:9px;
padding-bottom:20px;
height:max-content;
}
#projectileContainer{
display:flex;
gap:20px;
justify-content:center;
padding-top:10px;
}
#projectileContainer .item{
width:32px;
height:32px;
padding:0;
border:none;
border-radius:0;
}
#projectileContainer .item:hover,
#projectileContainer .item.selected{
background-color:#624a4d !important;
cursor:pointer;
}
.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;}
.bubble p{user-select:none;-moz-user-select:none;-webkit-user-select:none;}
.bubbleglobal p{user-select:none;-moz-user-select:none;-webkit-user-select:none;text-align:left;flex:0 0 100%;}
#emoteMenuToggle{
width:12px;
height:12px;
position:absolute;
top:3px;
left:4px;
background:url(../img/1/barsheet.png);
background-position-y:-65px;
cursor:pointer;
display:none;
}
#emoteMenu{
position:absolute;
top:8px;
left:40px;
height:24px;
overflow-y:hidden;
}
#emoteMenu .emote{
width:16px;
height:14px;
display:inline-block;
border-radius:6px;
background:rgba(255,255,255,0.2);
margin:0 2px 0 2px;
padding:4px;
text-align:center;
cursor:pointer;
}
#emoteMenu .emote:hover{
background:rgba(255,255,255,0.6);
transition:ease-in-out all 0.2s;
}
#resources-minigame{
position:absolute;
top:2%;
right:2%;
aspect-ratio:2.97;
width:17%;
background:url(../img/common/minigameResourcePanel.png);
background-size:100%;
background-repeat:no-repeat;
image-rendering:pixelated;
color:#e4d0b6;
font-family:'GraphicPixel';
display:flex;
align-items:center;
z-index:2;
transform:scale(1);
}
#resource-text{
width:80%;
margin-left:37%;
margin-bottom:2%;
z-index:3;
}
#resource-text.flash-red{
color:red;
transition:color 0.5s;
}
#resources-minigame.hidden{
display:none !important;
}
#minigame.hidden{
display:none !important;
}
#resources{
position:absolute;
top:5px;
right:24px;
background:#161221;
border-image:url(../img/common/small-border.png);
border-image-slice:4 fill;
border-image-repeat:round;
image-rendering:pixelated;
border-image-width:9px;
padding:0px 12px 12px 12px;
color:#e4d0b6;
font-family:'GraphicPixel';
font-size:12px;
border-top-width:0px;
border-radius:15px;
}
#resources.hidden{
display:none;
}
#resource-21300041 .img{
background:url(../img/1/item-GOLD3.png) !important;
}
#resources .img{
width:16px;
height:16px;
display:inline-block;
position:relative;
top:2px;
left:-5px;
}
#resources .resource{
display:inline-block;
padding:0 10px;
border-left:2px solid #e4a672;
height:25px;
margin-bottom:-8px;
}
#resources .resource:first-child{
border-left:none;
padding-left:5px;
}
#resources .resource:last-child{
padding-right:5px;
}
#shop-popup{
position:absolute;
top:10%;
left:5%;
width:40%;
max-height:360px;
padding:30px;
padding-top:0;
box-sizing:border-box;
color:#d7ab97;
font-family:'GraphicPixel';
background-color:#341e28 !important;
}
#shop-popup .close{
scale:0.666;
}
#shop-popup .items{
display:grid;
justify-content:start;
padding-top:28px;
overflow:auto;
max-height:313px;
margin-right:-30px;
width:100%;
grid:auto-flow / 1fr 1fr;
padding-right:30px;
}
#shop-popup .item-image{
width:32px;
height:32px;
margin:auto;
cursor:pointer;
}
#shop-popup .items::-webkit-scrollbar{
width:10px;
background-color:#533643;
}
#shop-popup .items::-webkit-scrollbar-thumb{
background-color:#b86f50;
}
#shop-popup .items::-webkit-scrollbar-thumb:hover{
background-color:#FCE045;
}
#shop-popup .items::-webkit-scrollbar-thumb:active{
background-color:#FCE045;
}
#shop-popup .item{
margin:3px;
background:#342433;
padding:5px;
border-radius:6px;
text-align:center;
border-image-source:url(../img/common/panel.png);
border-image-slice:12;
border-image-repeat:round;
image-rendering:pixelated;
border-image-width:3px;
padding-top:16px;
padding-bottom:16px;
box-shadow:0px 0px 4px rgba(0,0,0,0.5);
}
#shop-popup .item.selected{
background:#1e181e !important;;
}
#shop-popup .item:hover{
background:#533642;
cursor:pointer;
}
#shop-popup .item.disabled{
opacity:0.5;
}
#shop-popup .item.disabled:hover{
background:#342433;
cursor:default;
}
#shop-popup .item .name{
color:#fce045;
padding:5px;
}
#shop-popup .item .name .level{
color:white;
font-size:9px;
margin-left:3px;
}
#shop-popup .item .desc{
font-size:11px;
color:#b07d63;
padding-bottom:10px;
}
#shop-popup .item .price{
font-size:12px;
}
#shop-popup .item .price .resource{
display:inline-block;
margin-right:10px;
}
#shop-popup .item .price .resource:last-child{
margin-right:0px;
}
#shop-popup .item .price .resource .img{
width:16px;
height:16px;
display:inline-block;
position:relative;
top:2px;
left:-2px;
}
#shop-popup p{
margin:0;
padding:0;
line-height:15px;
font-family:'GraphicPixel';
}
#shop-popup .minLevel{
padding-top:9px;
color:#b3a9ad;
}
#shop-popup .minLevel .amount{
color:#fce045;
}
#shop-confirmation{
position:absolute;
top:18%;
left:43%;
width:200px;
min-height:120px;
transition:ease-in-out 300ms;
color:white;
padding:30px 30px 30px 50px;
display:none;
}
#shop-confirmation.visible{
display:block;
}
#shop-confirmation.hidden{
left:10%;
opacity:1;
transition:ease-in-out 300ms;
}
#shop-confirmation-text{
padding:15px 0;
width:100%;
}
#shop-confirmation-longtext{
color:#b3a9ad;
}
#shop-confirmation-text .highlight{
color:#fce045;
}
#shop-confirmation-longtext{
max-height:135px;
overflow:auto;
font-size:12px;
}
#shop-confirmation-longtext::-webkit-scrollbar{
width:10px;
background-color:#533643;
}
#shop-confirmation-longtext::-webkit-scrollbar-thumb{
background-color:#b86f50;
}
#shop-confirmation-longtext::-webkit-scrollbar-thumb:hover{
background-color:#FCE045;
}
#shop-confirmation-longtext::-webkit-scrollbar-thumb:active{
background-color:#FCE045;
}
#cancel-shop-purchase{
display:inline-block;
padding:5px 10px;
border:1px solid;
border-radius:3px;
margin-right:55px;
margin-left:8px;
margin-top:10px;
cursor:pointer;
opacity:0.6;
}
#cancel-shop-purchase:hover{
opacity:1;
}
#confirm-shop-purchase.disabled{
pointer-events:none;
opacity:0.3;
}
#confirm-shop-purchase{
display:inline-block;
padding:5px 10px;
border:1px solid;
border-radius:3px;
cursor:pointer;
opacity:0.6;
}
#confirm-shop-purchase:hover{
opacity:1;
}
#chatbox.active #emoteMenuToggle{
display:block;
}
#inventory .panelContent{
height:300px;
}
#inventory{
pointer-events:none;
z-index:0;
position:absolute;
top:8%;
width:750px;
left:calc(50% - 425px);
opacity:0;
height:400px;
transition:ease-in all 0.2s;
user-select:none;
padding:0 25px;
transition-delay:500ms;
}
body.inventory #inventory{
pointer-events:all;
z-index:9999;
opacity:1;
transition:ease-in-out all 0.2s;
transition-delay:0ms;
}
#inventorycontent{
display:grid;
grid-template-rows:1fr;
grid-column-gap:5px;
grid-row-gap:0px;
height:100%;
}
#inventorycontent.columns1{
grid-template-columns:repeat(1,1fr);
}
#inventorycontent.columns2{
grid-template-columns:repeat(2,1fr);
}
#inventorycontent.columns3{
grid-template-columns:repeat(3,1fr);
}
#inventorycontent.columns4{
grid-template-columns:repeat(4,1fr);
}
#inventorycontent.columns5{
grid-template-columns:repeat(5,1fr);
}
#inventorycontent.columns6{
grid-template-columns:repeat(6,1fr);
}
.inventorySection{
border-right:2px solid #b86f50;
}
.inventorySection:last-of-type{
border-right:none;
}
.inventoryTitle{
color:#d2ba2f;
padding:0 9px 12px;
font-size:18px;
text-shadow:0 2px black;
}
body .inventorySidebar{
position:absolute;
top:21%;
left:calc(50% + 250px);
z-index:9;
background-color:#341e28 !important;
width:38px;
padding:15px;
padding-left:18px;
height:210px;
transition:cubic-bezier(0.18,0.89,0.32,1.28) all 0.8s;
transition-delay:0ms;
pointer-events:none;
opacity:0;
}
body.inventory .inventorySidebar{
transition-delay:350ms;
transition-duration:400ms;
left:calc(50% + 360px);
opacity:1;
pointer-events:auto;
}
.inventorySidebar .header{
margin-bottom:10px;
font-size:12px;
color:#e4a672;
text-align:center;
}
.inventorySidebar .slots .slot{
position:relative;
margin-bottom:10px;
margin-left:5px;
}
.inventorySidebar .slots .slot img{
width:32px;
height:32px;
object-fit:cover;
object-position:100% 0;
cursor:pointer;
}
.inventorySidebar .slot .itemContainer{
width:32px;
border-image-width:3px;
height:32px;
background-color:#b86f50 !important;
}
.inventorySidebar .shortcut{
position:absolute;
bottom:5px;
right:6px;
color:white;
font-size:10px;
}
#instructions{
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;
color:#d2ba2f !important;
}
#instructions.active,#achievements.active{opacity:1;pointer-events:auto;}
#instructions p{
color:white !important;
}
#weapon,#armor{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;}
#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{float:left;opacity:0;}
#achievements li.unlocked .achievement-name{color:#fce045;}
#achievements li.unlocked .coin{opacity:1;}
#achievements .achievement-name{color:#fff;padding-top:8px}
#achievements .achievement-description{width:calc(100% - 100px);height:1.1em;overflow-y:hidden;float:left;text-overflow:ellipsis;white-space:nowrap;}
#achievement-notification{position:absolute;z-index:8;bottom:0;left:50%;text-align:center;font-family:'GraphicPixel';pointer-events:none;transition:0.3s height ease;-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;}
.achievement-sharing a{display:block;float:left;}
.panel{
background:none !important;
border-image-source:url("../img/common/panel.png");
border-image-slice:12 fill;
border-image-repeat:round;
image-rendering:pixelated;
border-image-width:12px;
font-family:'GraphicPixel',arial,sans-serif;
transition:ease-in-out 500ms;
opacity:100;
}
.panel.hidden,.panelBorder.hidden{opacity:0;pointer-events:none;transition:ease-in-out 500ms;}
.panel .panelTitle,
.panelBorder .panelTitle{
background:none !important;
border-image-source:url("../img/common/panel.png");
border-image-slice:12;
border-image-repeat:round;
image-rendering:pixelated;
border-image-width:6px;
padding:12px 0;
margin-bottom:-30px;
color:color(srgb 0.8233 0.73 0.1835);
text-shadow:0 1px black;
line-height:12px;
background-color:color(srgb 0.3267 0.2107 0.2608) !important;
position:relative;
top:-12px;
text-align:center;
overflow:hidden;
border-radius:5px;
z-index:99;
}
.panelBorder{
font-family:'GraphicPixel',arial,sans-serif;
background:none !important;
border-image-source:url("../img/common/panel.png");
border-image-slice:9;
border-image-repeat:round;
border-image-width:6px;
border-radius:12px;
image-rendering:pixelated;
}
#bubbles a{pointer-events:auto;text-decoration:none;color:#fcda5c;}
#create-new span:hover,#cancel span:hover{cursor:pointer;color:#d83939;}
#create-new span span{color:#b2af9b;}
#create-new span span:hover{color:#b2af9b;}
#playername{color:#fff;}
#credits,#loadcharacter,#confirmation,#death,#error,#settings,#keyboardCommands,#instructions,#gamepadCommands,#announcement,#playerClassSelection,#avatarStats,#miniMap{position:absolute;left:50%;text-align:center;font-family:'GraphicPixel',sans-serif;z-index:1000;}
#playerimage{image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;}
#parchment p{font-family:'GraphicPixel';}
#credits,#death,#settings,#keyboardCommands,#instructions,#gamepadCommands,#announcement,#playerClassSelection,#avatarStats,#miniMap{top:50%;}
.intro #credits{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;}
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;}
#sharing .gplus{height:22px;width:22px;background:url('../img/common/gplus.png');margin:0 12px 0 0px;}
#credits-link span{display:inline-block;margin-left:12px;}
#credits-link span: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:8px 12px 8px 12px;border-radius:8px;color:rgba(255,255,255,0.8);display:inline-block;text-align:center;position:absolute;}
.bubbleglobal{background:rgba(45,45,45,0.8);padding:8px 12px 8px 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:17px;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,#achievements,#lists,#credits,.ribbon,.play,.play div,.barbutton{-webkit-tap-highlight-color:transparent;}
#nameinput::-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 em,#settings p em{display:block;font-style:normal;}
#inventory .panelTitle{
width:250px;
margin:0 auto;
padding:16px !important;
}
#inventory .item{
text-align:center;
width:42px;
display:inline-block;
line-height:25px !important;
padding:4px;
margin:3px;
background-color:#341e28 !important;
border-image-width:4px;
position:relative;
}
#inventory .item:hover{
background-color:#533642 !important;
}
#inventory .item .itemCount{
color:#d2ba2f;
background:#533642;
box-shadow:1px 1px 1px 0px rgba(0,0,0,1);
border-radius:16px;
height:16px;
line-height:16px;
min-width:9px;
padding:2px 5px;
text-align:center;
position:absolute;
z-index:9;
top:-3px;
right:-3px;
pointer-events:none;
}
#inventory .item .timer{
position:absolute;
bottom:23px;
color:silver;
font-size:11px;
margin-bottom:-20px;
height:20px;
z-index:999999;
width:43px;
pointer-events:none;
}
#inventory .inventorySectionItems{
height:305px;
overflow-y:auto;
overflow-x:hidden;
}
#inventory .inventorySectionItems::-webkit-scrollbar{
width:10px;
background-color:#533643;
}
#inventory .inventorySectionItems::-webkit-scrollbar-thumb{
background-color:#b86f50;
}
#inventory .inventorySectionItems::-webkit-scrollbar-thumb:hover{
background-color:#FCE045;
}
#inventory .inventorySectionItems::-webkit-scrollbar-thumb:active{
background-color:#FCE045;
}
.tooltip{
padding:0.5em;
width:200px;
background-color:#dec696;
color:#000000;
text-align:center;
border-radius:0.25em;
position:absolute;
z-index:999999;
font-family:"GraphicPixel";
outline-style:solid;
outline-color:#a18b61;
outline-width:thin;
}
.tooltip .header{
color:#610b23;
font-size:12px;
padding-bottom:4px;
}
.tooltip .body{
font-size:12px;
padding-bottom:4px;
}
.tooltip .footer{
color:#352935;
font-size:11px;
font-style:italic;
}
#inventory .item:hover{
background:#d9c399;
}
.game.settings #settings{
opacity:1;
transition:ease-in all 0.3s;
}
#settings,#keyboardCommands,#instructions,#gamepadCommands,#announcement,#playerClassSelection,#avatarStats,#miniMap{
color:#b9b9b9;
padding:0 25px;
width:770px;
position:absolute;
top:5%;
left:calc(50% - 400px);
padding-bottom:40px;
transition:ease-in all 0.3s;
}
#miniMap{
background:transparent !important;
}
#settings small{
padding-top:20px;
}
#settings button,#instructions button,#playerClassSelection button{
border-image-width:4px;
background:#533642 !important;
padding:6px 20px;
color:#b9b9b9;
cursor:pointer;
}
#settings button:hover,#instructions button,#playerClassSelection button{
color:white;
background:#967784 !important;
}
#settings ul{
line-height:27px;
}
#keyboardCommands .panelContent{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding-top:40px;
}
#keyboardCommands .panelContent h2{
grid-column:1 / -1;
}
#keyboardCommands ul{
list-style:none;
padding:0;
margin:0;
}
#keyboardCommands ul li{
display:flex;
justify-content:space-between;
border-bottom:1px solid #ccc;
padding:5px 0;
}
#keyboardCommands ul li span{
font-weight:bold;
}
#gamepadCommands .panelContent{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:20px;
position:relative;
}
#gamepadCommands .panelContent h2{
grid-column:1 / -1;
text-align:center;
}
#gamepadCommands ul{
list-style:none;
padding:0;
margin:0;
}
#gamepadCommands ul li{
display:flex;
justify-content:space-between;
border-bottom:1px solid #ccc;
padding:5px 0;
}
#gamepadCommands ul li span{
font-weight:bold;
}
#instructions .panelContent{
display:grid;
grid-template-columns:1fr;
gap:20px;
padding:20px;
color:#ffffff;
position:relative;
}
#instructions .panelContent ul{
list-style:none;
padding:0;
margin:0;
}
#instructions .panelContent ul li{
margin:10px 0;
}
#instructions .panelContent ul li a{
color:#ffd700;
text-decoration:none;
}
#instructions .panelContent ul li a:hover{
text-decoration:underline;
}
#announcementContent{
margin-top:30px;
width:100%;
word-wrap:break-word;
overflow-wrap:break-word;
word-break:break-all;
overflow:hidden;
text-overflow:ellipsis;
}
#playerClassSelection .class-container{
display:flex;
flex-direction:row;
align-items:flex-start;
margin-bottom:20px;
padding:10px;
text-align:left;
margin:10px;
width:100%;
}
#playerClassSelection .class-container .left{
flex:1;
margin-left:10px;
margin-right:10px;
max-width:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
#playerClassSelection .class-container .right{
flex:1;
max-width:45%;
overflow-x:auto;
text-align:center;
}
#playerClassSelection .class-container img{
width:100%;
max-width:150px;
height:auto;
margin-bottom:10px;
}
#playerClassSelection .panelContent{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
#miniMap .panelContent{
width:100%;
height:400px;
overflow-y:auto;
overflow-x:hidden;
position:relative;
background:transparent;
opacity:1;
}
#miniMap .panelContent::-webkit-scrollbar{
display:none;
}
#miniMap .panelContent img{
display:block;
width:100%;
height:auto;
opacity:0.75;
}
.playerDot{
width:10px;
height:10px;
background-color:red;
border-radius:50%;
position:absolute;
display:flex;
align-items:center;
justify-content:center;
}
.playerLabel{
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
color:white;
font-size:12px;
font-weight:bold;
background:rgba(0,0,0,0.5);
padding:2px 4px;
border-radius:3px;
}
.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,#confirmation,#death,#error,#settings{opacity:0;pointer-events:none;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
.credits #credits,.createcharacter #createcharacter,.loadcharacter #loadcharacter,.confirmation #confirmation,.death #death,.error #error,.settings #settings{opacity:1;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;}
#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 #createcharacter,.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 #settings{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{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{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{left:0%;}
.game.credits .parchment-right,.game.death .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;}
@keyframes minigameglow{0%{top:-210%;transform:scale(0);}100%{top:-60%;transform:scale(1);}}
@keyframes minigamebounce{0%,100%{transform:translateY(0);}50%{transform:translateY(10%);}}
@keyframes flash{0%{background:#ffa2a2;}100%{background:#e22525;}}
@-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;}}
@keyframes glow{from{color:#fcda5c;}to{color:#fff;}}
@-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;}}
@keyframes logo1{from{background-position:0 -42px;}to{background-position:0 -294px;}}
@-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;}}
@keyframes logo2{from{background-position:0 -84px;}to{background-position:0 -588px;}}
@-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;}}
@keyframes logo3{from{background-position:0 -126px;}to{background-position:0 -882px;}}
@-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;}}
@keyframes parchleft{0%{left:0%;}45%{left:41%;}55%{left:41%;}100%{left:0%;}}
@-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%;}}
@keyframes parchright{0%{right:0%;}45%{right:41%;}55%{right:41%;}100%{right: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%;}}
@keyframes parchmiddle3{
0%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
45%{width:0px;margin-left:0px;background-position:-633px -882px;}
55%{width:0px;margin-left:0px;background-position:-633px -882px;}
100%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
}
@-moz-keyframes parchmiddle3{
0%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
45%{width:0px;margin-left:0px;background-position:-633px -882px;}
55%{width:0px;margin-left:0px;background-position:-633px -882px;}
100%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
}
@-webkit-keyframes parchmiddle3{
0%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
45%{width:0px;margin-left:0px;background-position:-633px -882px;}
55%{width:0px;margin-left:0px;background-position:-633px -882px;}
100%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
}
@-o-keyframes parchmiddle3{
0%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
45%{width:0px;margin-left:0px;background-position:-633px -882px;}
55%{width:0px;margin-left:0px;background-position:-633px -882px;}
100%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
}
@-ms-keyframes parchmiddle3{
0%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
45%{width:0px;margin-left:0px;background-position:-633px -882px;}
55%{width:0px;margin-left:0px;background-position:-633px -882px;}
100%{width:1038px;margin-left:-519px;background-position:-114px -882px;}
}
@keyframes parchmiddle2{
0%{width:692px;margin-left:-346px;background-position:-76px -588px;}
45%{width:0px;margin-left:0px;background-position:-422px -588px;}
55%{width:0px;margin-left:0px;background-position:-422px -588px;}
100%{width:692px;margin-left:-346px;background-position:-76px -588px;}
}
@-moz-keyframes parchmiddle2{
0%{width:692px;margin-left:-346px;background-position:-76px -588px;}
45%{width:0px;margin-left:0px;background-position:-422px -588px;}
55%{width:0px;margin-left:0px;background-position:-422px -588px;}
100%{width:692px;margin-left:-346px;background-position:-76px -588px;}
}
@-webkit-keyframes parchmiddle2{
0%{width:692px;margin-left:-346px;background-position:-76px -588px;}
45%{width:0px;margin-left:0px;background-position:-422px -588px;}
55%{width:0px;margin-left:0px;background-position:-422px -588px;}
100%{width:692px;margin-left:-346px;background-position:-76px -588px;}
}
@-o-keyframes parchmiddle2{
0%{width:692px;margin-left:-346px;background-position:-76px -588px;}
45%{width:0px;margin-left:0px;background-position:-422px -588px;}
55%{width:0px;margin-left:0px;background-position:-422px -588px;}
100%{width:692px;margin-left:-346px;background-position:-76px -588px;}
}
@-ms-keyframes parchmiddle2{
0%{width:692px;margin-left:-346px;background-position:-76px -588px;}
45%{width:0px;margin-left:0px;background-position:-422px -588px;}
55%{width:0px;margin-left:0px;background-position:-422px -588px;}
100%{width:692px;margin-left:-346px;background-position:-76px -588px;}
}
@keyframes parchmiddle1{
0%{width:346px;margin-left:-173px;background-position:-38px -294px;}
45%{width:0px;margin-left:0px;background-position:-211px -294px;}
55%{width:0px;margin-left:0px;background-position:-211px -294px;}
100%{width:346px;margin-left:-173px;background-position:-38px -294px;}
}
@-moz-keyframes parchmiddle1{
0%{width:346px;margin-left:-173px;background-position:-38px -294px;}
45%{width:0px;margin-left:0px;background-position:-211px -294px;}
55%{width:0px;margin-left:0px;background-position:-211px -294px;}
100%{width:346px;margin-left:-173px;background-position:-38px -294px;}
}
@-webkit-keyframes parchmiddle1{
0%{width:346px;margin-left:-173px;background-position:-38px -294px;}
45%{width:0px;margin-left:0px;background-position:-211px -294px;}
55%{width:0px;margin-left:0px;background-position:-211px -294px;}
100%{width:346px;margin-left:-173px;background-position:-38px -294px;}
}
@-o-keyframes parchmiddle1{
0%{width:346px;margin-left:-173px;background-position:-38px -294px;}
45%{width:0px;margin-left:0px;background-position:-211px -294px;}
55%{width:0px;margin-left:0px;background-position:-211px -294px;}
100%{width:346px;margin-left:-173px;background-position:-38px -294px;}
}
@-ms-keyframes parchmiddle1{
0%{width:346px;margin-left:-173px;background-position:-38px -294px;}
45%{width:0px;margin-left:0px;background-position:-211px -294px;}
55%{width:0px;margin-left:0px;background-position:-211px -294px;}
100%{width:346px;margin-left:-173px;background-position:-38px -294px;}
}
@keyframes coinsparks1{from{background-position:-216px -248px;}to{background-position:-360px -248px;}}
@-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;}}
@keyframes coinsparks2{from{background-position:-432px -496px;}to{background-position:-720px -496px;}}
@-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;}}
@keyframes coinsparks3{from{background-position:-648px -744px;}to{background-position:-1080px -744px;}}
@-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;}}
@keyframes invincible{from{background:#fa6a00;}to{background:#fabc00;}}
@-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;}}
@media screen and (min-width:1501px) and (min-height:871px){
#inventory{
top:10%;
width:1000px;
left:calc(50% - 590px);
height:450px;
}
#inventory .inventorySectionItems{
height:355px;
}
.inventorySidebar .shortcut{
right:13px;
}
body.inventory .inventorySidebar{
left:calc(50% + 450px);
width:46px;
}
.upscaled #emoteMenu{
top:30%;
left:5%;
overflow-y:hidden;
height:32px;
}
.upscaled #emoteMenu .emote{
width:16px;
height:16px;
display:inline-block;
border-radius:6px;
background:rgba(255,255,255,0.2);
margin:0px 3px 0 3px;
padding:0.2rem;
text-align:center;
cursor:pointer;
padding:6px;
}
}
@media screen and (min-width:1501px){
#time{
top:32px;
left:32px;
}
.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 .icon,.upscaled #tilt,.upscaled .parchment-left,.upscaled .parchment-middle,.upscaled .parchment-right,.upscaled .avatar,.upscaled .facebook,.upscaled .twitter,.upscaled .close,.upscaled .ribbon .top,.upscaled .ribbon .bottom,.upscaled .ext-link{background-image:url('../img/3/spritesheet.png');}
.upscaled #bar-container,.upscaled #healthbar,.upscaled .barbutton,.upscaled #chatbox,.upscaled #population{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 #fishingbar,#fishing-marker{background:url('../img/3/fishing.png');}
.upscaled #minigameprompt{overflow:hidden;position:absolute;top:35%;left:50%;display:none;cursor:none;background:url('../img/3/play.png') no-repeat center center / 100%;image-rendering:pixelated;animation:minigamebounce 2s infinite ease-in-out alternate;filter:saturate(5);}
.upscaled #minigameprompt.active{display:block;pointer-events:auto;}
.upscaled #minigameprompt:hover{filter:saturate(5);mask-image:url('../img/3/play.png');mask-size:cover;}
.upscaled #minigameprompt:before{content:"";position:absolute;height:200%;width:400%;top:-200%;left:-150%;background:radial-gradient(transparent 40%,rgba(255,255,255,0.7) 60%,transparent 75%);transform-origin:bottom center;z-index:10;}
.upscaled #minigameprompt:hover:before{animation:minigameglow 1.5s infinite forwards ease-in-out;}
.upscaled #weaponStats{
left:161px;
bottom:65px;
background:url('../img/3/barsheet.png');
background-position:-720px -144px;
width:353px;
font-size:16px;
line-height:24px;
}
.upscaled #weaponStats.visible{
padding-top:28px;
}
body{background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%),#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))),#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,.icon,.avatar,.close,#note,.ribbon .top,.ribbon .bottom,.ext-link{background-size:1266px auto;}
#logo{height:126px;width:687px;position:absolute;top:10%;left:50%;margin-left:-344px;z-index:3;}
#logosparks{width:687px;height:126px;z-index:4;animation:logo3 .8s steps(6,end) infinite;-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,#confirmation,#error{width:1266px;height:546px;position:absolute;top:55%;left:50%;margin-left:-633px;margin-top:-273px;font-size:30px;text-align:center;z-index:2;}
#parchment h1{margin-top:60px;font-weight:normal;}
.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{margin-top:30px;padding:0 15px;border:3px dashed #b2af9b;font-size:30px;border-radius:9px;height:30px;}
.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:-681px -2178px;}
.play.loading img{margin-top:-16px;margin-left:-16px;height:32px;width:32px;}
.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;}
#loadcharacter h1,#confirmation h1,#error h1{margin-top:30px;}
#playername{margin-top:15px;}
.loadcharacter .play,.confirmation .delete{margin:15px auto 15px auto;}
#confirmation p,#error p{font-size:30px;margin-top:60px;line-height:40px;}
#error p{width:70%;margin:60px auto 0;}
.button.delete{background-position:-687px -153px;}
.button.delete:active{background-position:0 -2178px;}
#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;}
#canvas{width:100%;height:672px;user-select:none;}
#fade{width:1440px;height:672px;top:15px;left:15px;}
#playerimage{height:96px;width:96px;}
#settings small{
padding-top:25px;
display:block;
}
.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 p,#settings p{font-size:30px;margin-top:140px;}
#death p em,#settings p em{margin-top:50px;}
#respawn{width:375px;height:153px;margin:60px auto 0 auto;background-position:0 -1428px;}
#respawn:active{background-position:-375px -1428px;}
#bubbles{width:1440px;height:672px;margin-bottom:-672px;position:relative;top:-672px;pointer-events:none;}
p{font-family:arial,sans-serif;font-size:12px;margin:0;padding:12px 0}
.bubble p{font-family:"GraphicPixel";font-size:18px;line-height:24px;}
.bubbleglobal p{font-family:"GraphicPixel";font-size:18px;line-height:24px;}
#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:21px;top:15px;left:33px;z-index:10;position:absolute;border-top:3px solid #ea6767;border-bottom:3px solid #a62828;}
#fishingbar{width:72px;height:450px;}
#bullseye{text-shadow:-1px -1px 3px #000,1px -1px 3px #000,-1px 1px 3px #000,1px 1px 3px #000;font-size:36px;}
#fishingtarget{margin-top:0px;height:0px;width:48px;left:12px;position:absolute;box-shadow:0px -3px 0px 0px green inset,0px 3px 0px 0px green inset;}
#fishingtargetbullseye{margin-top:0px;height:0px;width:48px;left:0px;position:absolute;}
#fish-box{margin-top:0px;height:48px;width:48px;top:12px;left:12px;position:absolute;}
#fish-marker{width:54px;height:9px;background-position:-72px 0;background-size:126px;left:-3px;top:21px;}
#fish{height:48px;width:48px;position:absolute;}
#minigameprompt{width:48px;height:48px;}
#resources-minigame{font-size:42px;}
#armor,#weapon{width:48px;height:48px;position:absolute;background-size:288px;background-position:-96px;}
#weapon{left:312px;top:3px;background-size:288px;}
#armor{left:363px;top:3px;}
#notifications{width:588px;margin-left:-294px;font-size:20px;color:#eee;top:6px;height:45px;}
#notifications div.top{top:-45px;}
#notifications span{line-height:45px;height:45px;}
#achievements .achievement-name{color:#fff;padding-top:6px}
#playercount{font-size:20px;left:1076px;top:18px;width:172px;text-align:center;}
#population{background-size:1440px;right:105px;bottom:66px;width:393px;background-position:-720px -144px;font-size:20px;line-height:30px;}
#population.visible{height:96px;}
#instance-population{padding-top:18px;}
.barbutton{background-size:1440px;height:45px;width:42px;}
#chatbutton{background-position:-306px -51px;top:3px;left:1260px;}
#chatbutton:hover{background-position:-348px -51px;}
#chatbutton.active{background-position:-390px -51px;}
#achievementsbutton{background-position:-432px -51px;top:3px;left:1305px;}
#achievementsbutton:hover,#achievementsbutton.blink:hover{background-position:-474px -51px;}
#achievementsbutton.blink{background-position:-864px -51px;}
#achievementsbutton.active{background-position:-516px -51px;}
#inventorybutton{background-position:-558px -51px;top:3px;left:1350px;}
#inventorybutton:hover{background-position:-600px -51px;}
#inventorybutton.active{background-position:-642px -51px;}
#mutebutton{background-position:-684px -51px;top:3px;left:1395px;}
#mutebutton:hover{background-position:-726px -51px;}
#mutebutton.active{background-position:-768px -51px;}
#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;color:#eee;background:none;width:90%;border:0;margin-left:5%;padding:16px 0;}
.pixel-corners{
clip-path:polygon(
0px calc(100% - 9px),
3px calc(100% - 9px),
3px calc(100% - 6px),
6px calc(100% - 6px),
6px calc(100% - 3px),
9px calc(100% - 3px),
9px 100%,
calc(100% - 9px) 100%,
calc(100% - 9px) calc(100% - 3px),
calc(100% - 6px) calc(100% - 3px),
calc(100% - 6px) calc(100% - 6px),
calc(100% - 3px) calc(100% - 6px),
calc(100% - 3px) calc(100% - 9px),
100% calc(100% - 9px),
100% 9px,
calc(100% - 3px) 9px,
calc(100% - 3px) 6px,
calc(100% - 6px) 6px,
calc(100% - 6px) 3px,
calc(100% - 9px) 3px,
calc(100% - 9px) 0px,
9px 0px,
9px 3px,
6px 3px,
6px 6px,
3px 6px,
3px 9px,
0px 9px
);
}
.pixel-corners-sm{
clip-path:polygon(
0px calc(100% - 9px),
3px calc(100% - 9px),
3px calc(100% - 6px),
6px calc(100% - 6px),
6px calc(100% - 3px),
9px calc(100% - 3px),
9px 100%,
calc(100% - 9px) 100%,
calc(100% - 9px) calc(100% - 3px),
calc(100% - 6px) calc(100% - 3px),
calc(100% - 6px) calc(100% - 6px),
calc(100% - 3px) calc(100% - 6px),
calc(100% - 3px) calc(100% - 9px),
100% calc(100% - 9px),
100% 9px,
calc(100% - 3px) 9px,
calc(100% - 3px) 6px,
calc(100% - 6px) 6px,
calc(100% - 6px) 3px,
calc(100% - 9px) 3px,
calc(100% - 9px) 0px,
9px 0px,
9px 3px,
6px 3px,
6px 6px,
3px 6px,
3px 9px,
0px 9px
);
}
.pixel-corners-xs{
clip-path:polygon(
0px calc(100% - 6px),
3px calc(100% - 6px),
3px calc(100% - 3px),
6px calc(100% - 3px),
6px 100%,
calc(100% - 6px) 100%,
calc(100% - 6px) calc(100% - 3px),
calc(100% - 3px) calc(100% - 3px),
calc(100% - 3px) calc(100% - 6px),
100% calc(100% - 6px),
100% 3px,
calc(100% - 3px) 3px,
calc(100% - 3px) 0px,
6px 0px,
4px 3px,
3px 3px,
3px 6px,
0px 6px
);
}
.pixel-corners-2xs{
clip-path:polygon(
0px calc(100% - 3px),
3px calc(100% - 3px),
3px 100%,
calc(100% - 3px) 100%,
calc(100% - 3px) calc(100% - 3px),
100% calc(100% - 3px),
100% 3px,
calc(100% - 3px) 3px,
calc(100% - 3px) 0px,
3px 0px
);
}
.pixel-corners-top{
clip-path:polygon(
0px 100%,
100% 100%,
100% 6px,
calc(100% - 3px) 6px,
calc(100% - 3px) 3px,
calc(100% - 6px) 3px,
calc(100% - 6px) 0px,
6px 0px,
6px 3px,
3px 3px,
3px 6px,
0px 6px
);
}
.pixel-corners-bottom{
clip-path:polygon(
0px calc(100% - 6px),
3px calc(100% - 6px),
3px calc(100% - 3px),
6px calc(100% - 3px),
6px 100%,
calc(100% - 6px) 100%,
calc(100% - 6px) calc(100% - 3px),
calc(100% - 3px) calc(100% - 3px),
calc(100% - 3px) calc(100% - 6px),
100% calc(100% - 6px),
100% 0px,
0px 0px
);
}
.upscaled #emoteMenuToggle{
width:36px;
height:36px;
position:absolute;
top:8px;
left:14px;
background:url(../img/3/barsheet.png);
background-position-y:-192px;
cursor:pointer;
}
#resources{right:40px;}
#shop-popup{
max-height:570px;
}
#shop-popup .items{
padding-top:33px;
max-height:380px;
grid:auto-flow / 1fr 1fr;
}
#shop-popup .item{
border-image-width:4px;
}
#credits,#death{width:1266px;height:546px;margin-left:-633px;margin-top:-273px;font-size:30px;}
.parchment-left,.parchment-right,.parchment-middle{background-size:1266px;}
.parchment-left{width:114px;height:546px;background-position:0 -882px;}
.parchment-right{width:114px;height:546px;background-position:-1152px -882px;}
.parchment-middle{height:546px;background-position:-114px -882px;width:1038px;margin-left:-519px;}
#credits h1{margin-top:35px;font-weight:normal;}
#credits h1 a{font-size:36px;}
.game #credits 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;}
.animate .parchment-middle{animation:parchmiddle3 1s ease 1;-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 -882px;}
.game.credits .parchment-middle,.game.death .parchment-middle{width:1038px;margin-left:-519px;background-position:-114px -882px;}
footer{font-size:20px;}
#resize-check{height:3px;}
.panelTitle{
padding:20px 0 !important;
top:-21px !important;
}
}
@media screen and (max-width:1500px){
.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 .icon,.upscaled #tilt,.upscaled .parchment-left,.upscaled .parchment-middle,.upscaled .parchment-right,.upscaled .avatar,.upscaled .facebook,.upscaled .twitter,.upscaled .close,.upscaled .ribbon .top,.upscaled .ribbon .bottom,.upscaled .ext-link{background-image:url('../img/2/spritesheet.png');}
.upscaled #bar-container,.upscaled #healthbar,.upscaled .barbutton,.upscaled #chatbox,.upscaled #population{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:url('../img/2/achievements.png');}
.upscaled #fishingbar,#fish-marker{background:url('../img/2/fishing.png');}
.upscaled #minigameprompt{overflow:hidden;position:absolute;top:35%;left:50%;display:none;cursor:none;background:url('../img/2/play.png') no-repeat center center / 100%;image-rendering:pixelated;animation:minigamebounce 2s infinite ease-in-out alternate;filter:saturate(5);}
.upscaled #minigameprompt.active{display:block;pointer-events:auto;}
.upscaled #minigameprompt:hover{filter:saturate(5);mask-image:url('../img/2/play.png');mask-size:cover;}
.upscaled #minigameprompt:before{content:"";position:absolute;height:200%;width:400%;top:-200%;left:-150%;background:radial-gradient(transparent 40%,rgba(255,255,255,0.7) 60%,transparent 75%);transform-origin:bottom center;z-index:10;}
.upscaled #minigameprompt:hover:before{animation:minigameglow 1.5s infinite forwards ease-in-out;}
#emoteMenuToggle{
width:24px;
height:24px;
position:absolute;
top:6px;
left:9px;
background:url(../img/2/barsheet.png);
background-position-y:-129px;
cursor:pointer;
}
#weaponStats{
position:absolute;
left:106px;
bottom:44px;
background:url(../img/2/barsheet.png);
background-position:-480px -96px;
width:222px;
color:#FFF;
font-family:'GraphicPixel';
font-size:12px;
text-align:center;
padding:20px;
padding-top:0;
opacity:0;
transition:0.2s ease-in-out all;
border-radius:10px 0 0 0;
}
#weaponStats.visible{
padding-top:16px;
opacity:100;
line-height:16px;
transition:0.2s ease-in-out all;
}
body{background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%),#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))),#000;background-size:auto,256px;}
#logo,#logosparks,.left-ornament,.right-ornament,#character,#character div,.button,.button div,#respawn,#scroll,.icon,.avatar,.close,#note,.ribbon .top,.ribbon .bottom,.ext-link{background-size:844px auto;}
#logo{height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;}
#logosparks{width:458px;height:84px;z-index:4;animation:logo2 .8s steps(6,end) infinite;-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,#confirmation,#error{width:844px;height:364px;position:absolute;top:55%;left:50%;margin-left:-422px;margin-top:-182px;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{margin-top:20px;padding:0 10px;border:2px dashed #b2af9b;font-size:20px;border-radius:6px;height:20px;}
.button{height:102px;width:250px;background-position:-458px -204px;margin:20px 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:-454px -1452px;}
.play.loading img{margin-top:-12px;margin-left:-12px;height:24px;width:24px;}
.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,#confirmation h1,#error h1{margin-top:20px;}
#playername{margin-top:10px;}
.loadcharacter .play,.confirmation .delete{margin:10px auto 10px auto;}
#confirmation p,#error p{font-size:20px;margin-top:40px;line-height:30px;}
#error p{width:70%;margin:40px auto 0;}
.button.delete{background-position:-458px -102px;}
.button.delete:active{background-position:0 -1452px;}
#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;}
#canvas{width:100%;height:448px;}
#fade{width:960px;height:448px;top:10px;left:10px;}
#playerimage{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;}
#death p,#settings p{font-size:20px;margin-top:90px;}
#death p em,#settings p{margin-top:30px;}
#respawn{width:250px;height:102px;margin:40px auto 0 auto;background-position:0 -952px;}
#respawn:active{background-position:-250px -952px;}
#bubbles{width:960px;height:448px;margin-bottom:-448px;position:relative;top:-448px;pointer-events:none;}
p{font-family:arial,sans-serif;font-size:12px;margin:0;padding:0;line-height:35px;}
.bubble p{font-family:"GraphicPixel";font-size:14px;}
.bubbleglobal p{font-family:"GraphicPixel";font-size:14px;}
#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:20px;top:8px;left:22px;z-index:10;position:absolute;}
#fishingbar{width:48px;height:300px;}
#bullseye{text-shadow:-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000;font-size:24px;}
#fishingtarget{margin-top:0px;height:0px;width:32px;left:8px;position:absolute;box-shadow:0px -2px 0px 0px green inset,0px 2px 0px 0px green inset;}
#fishingtargetbullseye{margin-top:0px;height:0px;width:32px;left:0px;position:absolute;}
#fish-box{margin-top:0px;height:32px;width:32px;top:8px;left:8px;position:absolute;}
#fish-marker{width:36px;height:6px;background-position:-48px 0;background-size:84px;left:-2px;top:14px;}
#fish{height:32px;width:32px;position:absolute;}
#minigameprompt{width:32px;height:32px;}
#resources-minigame{font-size:30px;}
#armor,#weapon{width:32px;height:32px;position:absolute;background-size:192px;background-position:-64px;}
#weapon{left:208px;top:2px;}
#armor{left:242px;top:2px;}
#notifications{width:392px;margin-left:-196px;font-size:16px;color:#eee;top:2px;height:30px;}
#notifications div.top{top:-30px;}
#notifications span{line-height:30px;height:30px;}
.windows #notifications span{line-height:34px;}
#playercount{font-size:16px;left:717px;top:10px;width:114px;text-align:center;}
#population{background-size:960px;right:70px;bottom:44px;width:262px;background-position:-480px -96px;font-size:14px;line-height:20px;}
#population.visible{height:64px;border-radius:10px 0 0 0;}
#instance-population{padding-top:12px;}
.barbutton{background-size:960px;height:30px;width:28px;}
#chatbutton{background-position:-204px -34px;top:2px;left:840px;}
#chatbutton:hover{background-position:-232px -34px;}
#chatbutton.active{background-position:-260px -34px;}
#achievementsbutton{background-position:-288px -34px;top:2px;left:870px;}
#achievementsbutton:hover,#achievementsbutton.blink:hover{background-position:-316px -34px;}
#achievementsbutton.blink{background-position:-576px -34px;}
#achievementsbutton.active{background-position:-344px -34px;}
#achievements .achievement-name{color:#fff;padding-top:5px}
#inventorybutton{background-position:-372px -34px;top:2px;left:900px;}
#inventorybutton:hover{background-position:-400px -34px;}
#inventorybutton.active{background-position:-428px -34px;}
#mutebutton{background-position:-456px -34px;top:2px;left:930px;}
#mutebutton:hover{background-position:-484px -34px;}
#mutebutton.active{background-position:-512px -34px;}
#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:20px;color:#eee;background:none;width:90%;border:0;margin-left:5%;padding:7px 0;}
#emoteMenu{
position:absolute;
top:8px;
left:40px;
height:24px;
overflow-y:hidden;
}
#emoteMenu .emote{
width:16px;
height:14px;
display:inline-block;
border-radius:6px;
background:rgba(255,255,255,0.2);
margin:0 2px 0 2px;
padding:4px;
text-align:center;
cursor:pointer;
}
#credits,#death{width:844px;height:364px;margin-left:-422px;margin-top:-182px;font-size:20px;}
.parchment-left,.parchment-right,.parchment-middle{background-size:844px;}
.parchment-left{width:76px;height:364px;background-position:0 -588px;}
.parchment-right{width:76px;height:364px;background-position:-768px -588px;}
.parchment-middle{height:364px;background-position:-76px -588px;width:692px;margin-left:-346px;}
#credits h1{margin-top:25px;font-weight:normal;}
#credits h1 a{font-size:24px;}
.game #credits h1{margin-top:40px;}
#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;}
.animate .parchment-middle{animation:parchmiddle2 1s ease 1;-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 -588px;}
.game.credits .parchment-middle,.game.death .parchment-middle{width:692px;margin-left:-346px;background-position:-76px -588px;}
footer{font-size:16px;}
#resize-check{height:2px;}
}
@media screen and (max-height:870px){
.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 .icon,.upscaled #tilt,.upscaled .avatar,.upscaled .facebook,.upscaled .twitter,.upscaled .close,.upscaled .ribbon .top,.upscaled .ribbon .bottom,.upscaled .ext-link{background-image:url('../img/2/spritesheet.png');}
.upscaled #bar-container,.upscaled #healthbar,.upscaled .barbutton,.upscaled #chatbox,.upscaled #population{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:url('../img/2/achievements.png');}
.upscaled #fishingbar,#fish-marker{background:url('../img/2/fishing.png');}
.upscaled #minigameprompt{overflow:hidden;position:absolute;top:35%;left:50%;display:none;cursor:none;background:url('../img/2/play.png') no-repeat center center / 100%;image-rendering:pixelated;animation:minigamebounce 2s infinite ease-in-out alternate;filter:saturate(5);}
.upscaled #minigameprompt.active{display:block;pointer-events:auto;}
.upscaled #minigameprompt:hover{filter:saturate(5);mask-image:url('../img/2/play.png');mask-size:cover;}
.upscaled #minigameprompt:before{content:"";position:absolute;height:200%;width:400%;top:-200%;left:-150%;background:radial-gradient(transparent 40%,rgba(255,255,255,0.7) 60%,transparent 75%);transform-origin:bottom center;z-index:10;}
.upscaled #minigameprompt:hover:before{animation:minigameglow 1.5s infinite forwards ease-in-out;}
body{background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%),#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))),#000;background-size:auto,256px;}
#logo,#logosparks,.left-ornament,.right-ornament,#character,#character div,.button,.button div,#respawn,#scroll,.icon,.avatar,.close,#note,.ribbon .top,.ribbon .bottom,.ext-link{background-size:844px auto;}
#logo{height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;}
#logosparks{width:458px;height:84px;z-index:4;animation:logo2 .8s steps(6,end) infinite;-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,#confirmation,#error{width:844px;height:364px;position:absolute;top:55%;left:50%;margin-left:-422px;margin-top:-182px;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{margin-top:20px;padding:0 10px;border:2px dashed #b2af9b;font-size:20px;border-radius:6px;height:20px;}
.button{height:102px;width:250px;background-position:-458px -204px;margin:20px 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:-454px -1452px;}
.play.loading img{margin-top:-12px;margin-left:-12px;height:24px;width:24px;}
.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,#confirmation h1,#error h1{margin-top:20px;}
#playername{margin-top:10px;}
.loadcharacter .play,.confirmation .delete{margin:10px auto 10px auto;}
#confirmation p,#error p{font-size:20px;margin-top:40px;line-height:30px;}
#error p{width:70%;margin:40px auto 0;}
.button.delete{background-position:-458px -102px;}
.button.delete:active{background-position:0 -1452px;}
#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;}
#canvas{width:100%;height:448px;}
#fade{width:960px;height:448px;top:10px;left:10px;}
.upscaled #weaponStats{
position:absolute;
left:106px;
bottom:44px;
background:url(../img/2/barsheet.png);
background-position:-480px -96px;
width:222px;
color:#FFF;
font-family:'GraphicPixel';
font-size:12px;
text-align:center;
padding:20px;
padding-top:0;
opacity:0;
transition:0.2s ease-in-out all;
}
.upscaled #weaponStats.visible{
padding-top:16px;
opacity:100;
line-height:16px;
transition:0.2s ease-in-out all;
}
#emoteMenu{
position:absolute;
top:8px;
left:40px;
height:24px;
overflow-y:hidden;
}
#emoteMenu .emote{
width:16px;
height:14px;
display:inline-block;
border-radius:6px;
background:rgba(255,255,255,0.2);
margin:0 2px 0 2px;
padding:4px;
text-align:center;
cursor:pointer;
}
#playerimage{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;}
#death p,#settings p{font-size:20px;margin-top:90px;}
#death p em,#settings p em{margin-top:30px;}
#respawn{width:250px;height:102px;margin:40px auto 0 auto;background-position:0 -952px;}
#respawn:active{background-position:-250px -952px;}
#bubbles{width:960px;height:448px;margin-bottom:-448px;position:relative;top:-448px;pointer-events:none;}
p{font-family:arial,sans-serif;font-size:12px;margin:0;padding:0;}
.bubble p{font-family:"GraphicPixel";font-size:14px;line-height:24px;}
.bubbleglobal p{font-family:"GraphicPixel";font-size:14px;line-height:24px;}
#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:16px;top:8px;left:22px;z-index:10;position:absolute;border-top:3px solid #ea6767;border-bottom:3px solid #a62828;}
#fishingbar{width:48px;height:300px;}
#bullseye{text-shadow:-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000;font-size:24px;}
#fishingtarget{margin-top:0px;height:0px;width:32px;left:8px;position:absolute;box-shadow:0px -2px 0px 0px green inset,0px 2px 0px 0px green inset;}
#fishingtargetbullseye{margin-top:0px;height:0px;width:32px;left:0px;position:absolute;}
#fish-box{margin-top:0px;height:32px;width:32px;top:8px;left:8px;position:absolute;}
#fish-marker{width:36px;height:6px;background-position:-48px 0;background-size:84px;left:-2px;top:14px;}
#fish{height:32px;width:32px;position:absolute;}
#minigameprompt{width:32px;height:32px;}
#resources-minigame{font-size:30px;}
#armor,#weapon{width:32px;height:32px;position:absolute;background-size:192px;background-position:-64px;}
#weapon{left:208px;top:2px;}
#armor{left:242px;top:2px;}
#notifications{width:392px;margin-left:-196px;font-size:16px;color:#eee;top:2px;height:30px;}
#notifications div.top{top:-30px;}
#notifications span{line-height:30px;height:30px;}
.windows #notifications span{line-height:34px;}
#playercount{font-size:16px;left:717px;top:10px;width:114px;text-align:center;}
#population{background-size:960px;right:70px;bottom:44px;width:262px;background-position:-480px -96px;font-size:14px;line-height:20px;}
#population.visible{height:64px;}
#instance-population{padding-top:12px;}
.barbutton{background-size:960px;height:30px;width:28px;}
#chatbutton{background-position:-204px -34px;top:2px;left:840px;}
#chatbutton:hover{background-position:-232px -34px;}
#chatbutton.active{background-position:-260px -34px;}
#achievementsbutton{background-position:-288px -34px;top:2px;left:870px;}
#achievementsbutton:hover,#achievementsbutton.blink:hover{background-position:-316px -34px;}
#achievementsbutton.blink{background-position:-576px -34px;}
#achievementsbutton.active{background-position:-344px -34px;}
#achievements .achievement-name{color:#fff;padding-top:5px}
#inventorybutton{background-position:-372px -34px;top:2px;left:900px;}
#inventorybutton:hover{background-position:-400px -34px;}
#inventorybutton.active{background-position:-428px -34px;}
#mutebutton{background-position:-456px -34px;top:2px;left:930px;}
#mutebutton:hover{background-position:-484px -34px;}
#mutebutton.active{background-position:-512px -34px;}
#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:20px;color:#eee;background:none;width:90%;border:0;margin-left:5%;padding:7px 0;}
.upscaled #emoteMenuToggle{
width:24px;
height:24px;
position:absolute;
top:6px;
left:9px;
background:url(../img/2/barsheet.png);
background-position-y:-129px;
cursor:pointer;
}
#credits,#death{width:844px;height:364px;margin-left:-422px;margin-top:-182px;font-size:20px;}
.parchment-left,.parchment-right,.parchment-middle{background-size:844px;}
.parchment-left{width:76px;height:364px;background-position:0 -588px;}
.parchment-right{width:76px;height:364px;background-position:-768px -588px;}
.parchment-middle{height:364px;background-position:-76px -588px;width:692px;margin-left:-346px;}
#credits h1{margin-top:25px;font-weight:normal;}
#credits h1 a{font-size:24px;}
#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;}
.animate .parchment-middle{animation:parchmiddle2 1s ease 1;-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 -588px;}
.game.credits .parchment-middle,.game.death .parchment-middle{width:692px;margin-left:-346px;background-position:-76px -588px;}
footer{font-size:16px;}
#resize-check{height:2px;}
#shop-popup .items{
max-height:310px !important;
}
}
@media screen and (max-width:1000px){
canvas{image-rendering:optimizeSpeed;}
body{background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%),#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))),#000;background-size:auto,128px;}
#logo,#logosparks,.left-ornament,.right-ornament,#character,#character div,.button,.button div,#respawn,#scroll,.icon,.avatar,.close,#note,.ribbon .top,.ribbon .bottom,.ext-link{background-size:422px auto;}
#logo{height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;}
#logosparks{width:229px;height:42px;z-index:4;animation:logo1 .8s steps(6,end) infinite;-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,#confirmation,#error{width:422px;height:182px;position:absolute;top:50%;left:50%;margin-left:-211px;margin-top:-91px;font-size:10px;text-align:center;z-index:2;}
#parchment 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{margin-top:10px;padding:0 5px;border:1px dashed #b2af9b;font-size:10px;border-radius:3px;height:10px;}
.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:-227px -726px;}
.play.loading img{margin-top:-8px;margin-left:-8px;height:16px;width:16px;}
.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,#confirmation h1,#error h1{margin-top:20px;}
#playername{margin-top:5px;}
.loadcharacter .play,.confirmation .delete{margin:5px auto 5px auto;}
#confirmation p,#error p{font-size:10px;margin-top:20px;line-height:20px;}
#error p{width:70%;margin:40px auto 0;}
.button.delete{background-position:-229px -51px;}
.button.delete:active{background-position:0 -726px;}
#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;}
#canvas{width:100%;height:224px;}
#fade{width:480px;height:224px;top:5px;left:5px;}
#foreground{cursor:default;}
#playerimage{height:32px;width:32px;}
.close{height:16px;width:16px;top:-4px;right:-5px;background-position:-354px -126px;}
.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;}
#death p,#settings p{font-size:10px;margin-top:45px;}
#death p em,#settings p em{margin-top:0px;}
#respawn{width:125px;height:51px;margin:21px auto 0 auto;background-position:0 -476px;}
#respawn:active{background-position:-125px -476px;}
#bubbles{width:480px;height:224px;margin-bottom:-224px;position:relative;top:-224px;pointer-events:none;}
p{font-family:arial,sans-serif;font-size:12px;margin:0;padding:0;line-height:35px;}
.bubble p{font-family:"GraphicPixel";font-size:10px;}
.bubbleglobal p{font-family:"GraphicPixel";font-size:10px;}
#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:5px;top:4px;left:11px;z-index:10;position:absolute;}
#fishingbar{width:24px;height:150px;}
#bullseye{text-shadow:-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,1px 1px 1px #000;font-size:12px;}
#fishingtarget{margin-top:0px;height:0px;width:16px;left:4px;position:absolute;box-shadow:0px -1px 0px 0px green inset,0px 1px 0px 0px green inset;}
#fishingtargetbullseye{margin-top:0px;height:0px;width:16px;left:0px;position:absolute;}
#fish-box{margin-top:0px;height:16px;width:16px;top:4px;left:4px;position:absolute;}
#fish-marker{width:18px;height:3px;background-position:-24px 0;background-size:42px;left:-1px;top:7px;}
#fish{height:16px;width:16px;position:absolute;}
#minigameprompt{width:16px;height:16px;}
#resources-minigame{font-size:16px;}
#armor,#weapon{width:16px;height:16px;position:absolute;background-size:96px;background-position:-32px;}
#weapon{left:104px;top:1px;}
#armor{left:121px;top:1px;}
#notifications{width:196px;margin-left:-98px;font-size:10px;color:#eee;top:2px;height:15px;}
#notifications div.top{top:-15px;}
#notifications span{line-height:15px;height:15px;}
#playercount{font-size:10px;left:358px;top:4px;width:57px;text-align:center;}
#population{background-size:480px;right:35px;bottom:22px;width:131px;background-position:-240px -48px;font-size:9px;line-height:12px;}
#population.visible{height:32px;}
#instance-population{padding-top:5px;}
.barbutton{background-size:480px;height:15px;width:14px;}
#chatbutton{background-position:-102px -17px;top:1px;left:420px;}
#chatbutton:hover{background-position:-116px -17px;}
#chatbutton.active{background-position:-130px -17px;}
#achievementsbutton{background-position:-144px -17px;top:1px;left:435px;}
#achievementsbutton:hover,#achievementsbutton.blink:hover{background-position:-158px -17px;}
#achievementsbutton.blink{background-position:-288px -17px;}
#achievementsbutton.active{background-position:-172px -17px;}
#achievements .achievement-name{color:#fff;padding-top:6px}
#inventorybutton{background-position:-186px -17px;top:1px;left:450px;}
#inventorybutton:hover{background-position:-200px -17px;}
#inventorybutton.active{background-position:-214px -17px;}
#mutebutton{background-position:-228px -17px;top:1px;left:465px;}
#mutebutton:hover{background-position:-242px -17px;}
#mutebutton.active{background-position:-256px -17px;}
#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;color:#eee;background:none;width:90%;border:0;margin-left:5%;padding:0;}
#credits,#death{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:182px;background-position:0 -294px;}
.parchment-right{width:38px;height:182px;background-position:-384px -294px;}
.parchment-middle{height:182px;background-position:-38px -294px;width:346px;margin-left:-173px;}
#credits h1{margin-top:12px;font-weight:normal;}
.game #credits 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;}
.animate .parchment-middle{animation:parchmiddle1 1s ease 1;-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 -294px;}
.game.credits .parchment-middle,.game.death .parchment-middle{width:346px;margin-left:-173px;background-position:-38px -294px;}
#resize-check{height:1px;}
#weaponStats{
position:absolute;
left:70px;
background:url(../img/1/barsheet.png);
background-position:-240px -48px;
width:91px;
color:#FFF;
font-family:'GraphicPixel';
font-size:9px;
text-align:center;
opacity:0;
padding:20px;
padding-top:0;
transition:0.2s ease-in-out all;
bottom:18px;
}
#weaponStats.visible{
padding-top:5px;
opacity:100;
transition:0.2s ease-in-out all;
line-height:9px;
}
}
@media screen and (max-width:800px){
body{border-top:0px;}
.intro #container,.game #logo,.game #parchment{display:none;}
.game #container{display:block;padding:0;}
#mask,#fade{display:none;}
.game.death #parchment{display:block;}
.game .createcharacter #createcharacter,.game .loadcharacter #loadcharacter,.game .confirmation #confirmation,.game .error #error{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%),#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))),#000;background-size:auto,128px;}
body{background:#000;}
#logosparks{animation:none;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;display:none;}
#container{height:258px;width:480px;position:relative;left:50%;top:50%;margin:-128px auto 0 -240px;}
#canvasborder{background:none;padding:0;}
#parchment,#logosparks,.left-ornament,.right-ornament,#character,#character div,.button,.button div,#respawn,#scroll,.icon{background-size:422px auto;}
#parchment{background:none;}
#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:125px;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;}
.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{margin-top:20px;padding:0 10px;border:2px dashed #b2af9b;font-size:20px;border-radius:6px;height:20px;}
.button{height:54px;width:204px;background-position:-500px -952px;margin:20px auto 0 auto;position:relative;background-size:844px;}
.play div{height:54px;width:204px;background-position:-458px -512px;background-size:844px;}
.play div:active{background-position:0px -1398px;}
.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;}
#foreground{cursor:default;}
#parchment.animate{animation:none;-moz-animation:none;-webkit-animation:none;-o-animation:none;-webkit-animation:none;}
#loadcharacter,#confirmation,#createcharacter,#error{display:none;margin-top:0;margin-left:0;left:0;width:auto;}
.loadcharacter #loadcharacter,.confirmation #confirmation,.createcharacter #createcharacter,.error #error{display:block;width:100%;}
#loadcharacter h1,#confirmation h1,#error h1{font-size:12px;font-weight:normal;}
#loadcharacter,#confirmation,#error{height:auto;}
#loadcharacter h1,#confirmation h1,#createcharacter h1,#error h1{font-size:12px;}
#createcharacter{padding-bottom:20px;}
#playername{font-size:20px;margin:10px 0px;}
#create-new{margin:20px 0px;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;}
#cancel{font-size:20px;margin:20px 0;}
#playerimage{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:16px;top:8px;left:22px;z-index:10;position:absolute;}
#fishingbar{width:48px;;height:300px;}
#bullseye{text-shadow:-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000;font-size:24px;}
#fishingtarget{margin-top:0px;height:0px;width:32px;left:8px;position:absolute;box-shadow:0px -2px 0px 0px green inset,0px 2px 0px 0px green inset;}
#fishingtargetbullseye{margin-top:0px;height:0px;width:32px;left:0px;position:absolute;}
#fish-box{margin-top:0px;height:32px;width:32px;top:8px;left:8px;position:absolute;}
#fish-marker{width:36px;height:6px;background-position:-48px 0;background-size:84px;left:-2px;top:14px;}
#fish{height:32px;width:32px;position:absolute;}
#minigameprompt{width:32px;;height:32px;}
#resources-minigame{font-size:30px;}
#armor,#weapon{width:32px;height:32px;position:absolute;background-size:192px;background-position:-64px;}
#weapon{left:208px;top:2px;}
#armor{left:242px;top:2px;}
#notifications{display:none;}
#playercount{font-size:20px;left:270px;top:10px;width:114px;text-align:center;}
#playercount span{display:none;}
#playercount span.count{display:inline;}
.barbutton{background-size:960px;height:30px;width:28px;}
#chatbutton{background-position:-204px -34px;top:2px;left:360px;}
#chatbutton:hover{background-position:-232px -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;}
#achievements .achievement-name{padding-top:5px}
#inventorybutton{background-position:-372px -34px;top:2px;left:420px;}
#inventorybutton:hover{background-position:-400px -34px;}
#inventorybutton.active{background-position:-428px -34px;}
#mutebutton{background-position:-456px -34px;top:2px;left:450px;}
#mutebutton:hover{background-position:-484px -34px;}
#mutebutton.active{background-position:-512px -34px;}
#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:20px;color:#eee;background:none;width:90%;border:0;margin-left:5%;padding:0px 0;}
.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{background:url('../img/spritesheet.png') 0 -294px;height:182px;width:422px;position:absolute;top:50%;left:50%;margin-top:-91px;margin-left:-211px;}
.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{padding-top:30px;color:#373737;font-size:20px;margin-top:0;width:80%;margin:0 auto;}
.game.death #death p em{display:block;margin-top:15px;font-style:normal;}
#achievements,#lists{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}
.game.death #death{height:172px;width:417px;margin-left:-208px;margin-top:-93px;color:#373737;background:url('../img/1/spritesheet.png') 0 -527px;margin:-10px 0 0 0;}
#respawn{background-position:-204px -1398px;background-size:844px auto;width:204px;height:54px;}
#respawn:active{background-position:-408px -1398px;}
footer{display:none;}
#bubbles{overflow:hidden;}
#weaponStats{
position:absolute;
left:70px;
background:url(../img/1/barsheet.png);
background-position:-240px -48px;
width:91px;
color:#FFF;
font-family:'GraphicPixel';
font-size:9px;
text-align:center;
opacity:0;
padding:20px;
padding-top:0;
transition:0.2s ease-in-out all;
bottom:18px;
}
#weaponStats.visible{
padding-top:5px;
opacity:100;
transition:0.2s ease-in-out all;
line-height:9px;
}
}
@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: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;}
}
@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 .animate .parchment-left,.tablet .animate .parchment-right,.tablet .animate .parchment-middle{animation:none;-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;}
.tablet .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;animation:none;-moz-animation:none;}
.tablet #logo,.tablet #parchment,.tablet #container{transition:none;-moz-transition:none;}
.tablet #achievement-notification .name,.tablet #achievement-notification .title,.tablet #achievement-notification .coin,.tablet #achievement-notification{transition:none;-moz-transition:none;}
.windows #parchment,.windows #parchment input,.windows #notifications,.windows #instructions,.windows #achievements,.windows #achievement-notification,
.windows #playercount,.windows #credits,.windows #loadcharacter,.windows #confirmation,.windows #death,.windows #error,.settings #settings
.windows #parchment p,.windows #portrait p,.windows .alert,.windows footer,.windows .bubble p,.windows #population{font-family:'AdvoCut';}
.opera.intro #bubbles,.opera.intro #canvas,.opera.intro #container{z-index:-30000;}
.opera .credits #credits,.opera .createcharacter #createcharacter,.opera .loadcharacter #loadcharacter,.opera .confirmation #confirmation,.opera .death #death,.opera .settings #settings
.opera .error #error{z-index:30000;}
.opera #instructions,.opera #achievements{z-index:-30000;}
.opera #achievements.active,.opera #instructions.active{z-index:30000;}
.opera #coinsparks{display:none;}
.opera #death,.opera #credits,.opera #error,.opera #confirmation,.opera #loadcharacter,.opera #settings{z-index:-30000;}