/* Eric Meyer's CSS reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* Typography*/ @font-face { font-family: 'GraphicPixel'; src: url('../fonts/graphicpixel-webfont.eot'); src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/graphicpixel-webfont.woff') format('woff'), url('../fonts/graphicpixel-webfont.ttf') format('truetype'), url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AdvoCut'; src: url('../fonts/advocut-webfont.eot'); src: url('../fonts/advocut-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/advocut-webfont.woff') format('woff'), url('../fonts/advocut-webfont.ttf') format('truetype'), url('../fonts/advocut-webfont.svg#AndinaRegular') format('svg'); font-weight: normal; font-style: normal; } .gp {font-family: 'GraphicPixel', sans-serif;} /* General Layout */ html {-webkit-text-size-adjust: 100%} html, body {height:100%;} body {padding:0;margin:0;background:#111;overflow:hidden;image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast;border-top:2px solid #707070;} canvas { position:absolute;image-rendering:optimizeSpeed;} #background { background:url('../img/common/loading.png') no-repeat center center, #000;} .error #background { background:url('../img/common/loading-error.png') no-repeat center center, #000;} #background, #foreground { margin:0; padding:0;} #achievements nav::selection {background:transparent;text-decoration:none;color:transparent;} #canvas, #bar-container, #bubbles, #chatbox, #canvasborder, #foreground, #background, footer, #container, #achievement-notification {-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;} .started #canvas {cursor:none;} #foreground { -webkit-tap-highlight-color:rgba(0,0,0,0); /* -webkit-touch-callout:none; */ /* margin:0 auto; display:block;*/ } @media screen and (max-width: 600px) { #entities { cursor: default; } } h1 {font-weight:normal;} .preload {display:none;} /* Common rules */ body.upscaled.game {background:#000;} .game #logo {display:none;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;animation:none;} #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, .icon, #tilt, .parchment-left, .parchment-middle, .parchment-right, .avatar, .facebook, .twitter, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background:url('../img/1/spritesheet.png');image-rendering:-moz-crisp-edges; image-rendering:-webkit-optimize-contrast;} #moztab {height:49px;width:118px;position:fixed;top:0;right:15%;background:url('../img/1/spritesheet.png') no-repeat -229px -204px;display:block;} #vignetting {height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;} #logosparks {display:block;position:absolute;top:0;left:0;} #parchment, #parchment input {font-family:'GraphicPixel';} #parchment input {width:50%;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;} #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);} #parchment input.field-error {background:rgba(255,0,0,0.1);border-color:#f84444;} #character div {-moz-transition:0.4s opacity linear;-webkit-transition:0.4s opacity linear;-o-transition:0.4s opacity linear;-ms-transition:0.4s opacity linear;transition:0.4s opacity linear;} #mask {height:100%;width:100%;position:fixed;top:0;left:0;background:rgba(20,20,20,1);opacity:1;z-index:20;-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;pointer-events:none;} #bar-container {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:relative;width:100%;z-index:10;} #healthbar {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;} #hitpoints {background:#d83939;-moz-transition:.5s width ease;-webkit-transition:.5s width ease;-o-transition:.5s width ease;-ms-transition:.5s width ease;transition:.5s width ease;} #hitpoints.white {-moz-animation:flash 0.5s linear 1;-webkit-animation:flash 0.5s linear 1;-o-animation:flash 0.5s linear 1;-ms-animation:flash 0.5s linear 1;animation:flash 0.5s linear 1;} #hitpoints.invincible {-moz-animation:invincible 0.3s steps(3, end) alternate infinite;-webkit-animation:invincible 0.3s steps(3, end) alternate infinite;-o-animation:invincible 0.3s steps(3, end) alternate infinite;-ms-animation:invincible 0.3s steps(3, end) alternate infinite;} #hpguide {background: rgb(128,64,64); position: absolute; display: none; } #notifications {position:absolute;left:50%;text-align:center;font-family:'GraphicPixel';overflow:hidden;} #notifications div {position:absolute;-moz-transition:none;-webkit-transition:none;top:0;width:100%;} #notifications div.top {-moz-transition:0.5s top ease;-webkit-transition:0.5s top ease;-o-transition:0.5s top ease;-ms-transition:0.5s top ease;transition:0.5s top ease;} #notifications div.top #message1 {opacity:0;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;} #notifications span {display:block;text-align:center;width:100%;opacity:1;-moz-user-select:none;-webkit-user-select:none;} #playercount {font-family:'GraphicPixel';color:#e3e3e3;position:absolute;} #playercount:hover {cursor:pointer;color:#FCE045;} #population {position:absolute;font-family:'GraphicPixel';color:#fff;text-align:center;height:0;overflow:hidden;pointer-events:none;-moz-transition:0.2s height ease; -webkit-transition: 0.2s height ease;-o-transition:0.2s height ease;-ms-transition:0.2s height ease;transition:0.2s height ease;} #population div{background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;opacity:0;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;} #guild-name, #population span:nth-child(1) {color:#FCE045;} #population.visible div{opacity:1;} #guild-population {height:0;overflow:hidden;} #population.visible, #guild-population.visible{height:auto;pointer-events:auto;} .barbutton {background:url('../img/1/barsheet.png');image-rendering:-moz-crispt-edges;position:absolute;} #chatbox {background:url('../img/1/barsheet.png');image-rendering:-moz-crisp-edges;position:absolute;left:50%;z-index:5;-moz-transition:0.2s bottom ease;-webkit-transition:0.2s bottom ease;-o-transition:0.2s bottom ease;-ms-transition:0.2s bottom ease;transition:0.2s bottom ease;} #chatinput {color:#eee;} #chatinput.placeholder {color:#aaa;} div.clear{ float: left; clear: both; width: 100%; } #inspector { font-family:'GraphicPixel'; color:#e3e3e3; background-color:rgba(0, 0, 0, 0.43); position: absolute; top: 15px; left: 15px; width: 140px; margin-left: 0px; padding: 4px; display: none; border-radius: 0 0 6px 0; } #inspector .details { margin-bottom: 8px; text-transform: capitalize; } #inspector .name { margin-bottom: 8px; text-transform: capitalize; } #inspector .level { margin-bottom: 8px; text-transform: capitalize; } #inspector .health { height: 10px; width: 100%; background: red; clear: left; margin-top: 8px; } #dropDialog { font-family:'GraphicPixel'; font-size: 9pt; color:#e3e3e3; position: absolute; left: 50%; top: 50%; margin-left: -76px; margin-top: -23px; padding: 5px; background: rgba(45, 45, 45, 0.8); border-radius: 6px 6px 6px 6px; display: none; } #dropDialog.active { display: block; } #dropTitle { text-align: center; } #dropAccept, #dropCancel { background: rgb(120, 120, 120); cursor: hand; } .bubble p {-moz-user-select:none;-webkit-user-select:none;} #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;} #instructions.active, #achievements.active {opacity:1;pointer-events:auto;} #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, #achievements li .achievement-name {float:left;} #achievements li .coin {opacity:0;} #achievements li.unlocked .achievement-name {color:#fce045;} #achievements li.unlocked .coin {opacity:1;} #achievements .achievement-name {color:#fff;} #achievements .achievement-description {float:right;width:65%;} #achievement-notification {position:absolute;z-index:8;bottom:0;left:50%;text-align:center;font-family:'GraphicPixel';pointer-events:none;-moz-transition:0.3s height ease;-webkit-transition:0.3s height ease;-o-transition:0.3s height ease;-ms-transition:0.3s height ease;} #achievement-notification .name, #achievement-notification .title {opacity:0;-moz-transition:0.3s opacity linear;-webkit-transition:0.3s opacity linear;-o-transition:0.3s opacity linear;-ms-transition:0.3s opacity linear;transition:0.3s opacity linear;} #achievement-notification.active .name, #achievement-notification.active .title {opacity:1;} #achievement-info {overflow:hidden;height:100%;} .achievement-sharing {position:absolute;display:none;} #achievements li.unlocked:hover .achievement-sharing {display:block;} .achievement-sharing a {display:block;float:left;} #bubbles a {pointer-events:auto;text-decoration:none;color:#fcda5c;} .link:hover {cursor:pointer;color:#d83939;} .play img {display:none;} .play.loading span:hover {color:inherit;cursor:default;} .play.loading img {display:inline;} #create-new {margin-top:2em;} #playername {color:#fff;} .validation-summary {margin:.5em;min-height:1em;} .validation-error {color:#880000;text-shadow:2px 2px 2px #ff6666;} @keyframes blink { 0% {color:red;} 100% {color:#880000;}} @-webkit-keyframes blink { 0% {color:red;} 100% {color:#880000;}} .blink {-webkit-animation:blink 0.3s linear 5 alternate;-moz-animation:blink 0.3s linear 5 alternate;animation:blink 0.3s linear 5 alternate;} #credits, #loadcharacter, #confirmation, #death, #error, #about, #legal {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, #about {top:50%;} .intro #credits, .intro #about {top:55%;} #credits h1 a {color:#fcda5c;text-decoration:none;} #authors div a {display:block;color:#fff;text-decoration:none;} #authors div a:hover, #credits h1 a:hover {color:#93C1FF;} #seb {clear:both;} #portrait {display:none;} #about .link a:hover, #legal a:hover {color:#d83939;} footer {font-family:'GraphicPixel';position:absolute;bottom:5%;left:0;text-align:center;width:100%;color:#c6c0a3;-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;} .upscaled.game footer {color:#8a8a8a;} .intro footer {opacity:1;} footer:hover {opacity:1;} footer div {display:inline-block;} #sharing a {display:block;float:right;background-size:844px;position:relative;top:-2px;} #sharing .facebook {height:22px;width:22px;background-position:-822px -224px;margin:0 12px 0 12px;} #sharing .facebook:hover {background-position:-822px -224px;} #sharing .twitter {height:22px;width:32px;background-position:-770px -224px;margin:0 12px 0 0;} #sharing .twitter:hover {background-position:-770px -224px;} #sharing .gplus {height:22px;width:22px;background:url('../img/common/gplus.png');margin:0 12px 0 0px;} #toggle-credits {display:inline-block;margin-left:12px;} #legal-link a {text-decoration:none;color:inherit;} #credits-link span:hover, #privacy-link span:hover, #legal-link a:hover {color:#fcda5c;cursor:pointer;} #sharing a:hover {-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);} #sharing a:active {-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);} .close {position:absolute;z-index:20000;} .close:hover {cursor:pointer;} .ribbon {position:absolute;} .ribbon:hover {cursor:pointer;} .ribbon .top {-moz-transition:0.25s height ease;-webkit-transition:0.25s height ease;-o-transition:0.25s height ease;-ms-transition:0.25s height ease;transition:0.25s height ease;} .bubble {background:rgba(45,45,45,0.8);padding:0px 12px 0px 12px;border-radius:8px;color:rgba(255,255,255,0.8);display:inline-block;text-align:center;position:absolute;} .thingy {height:10px;width:11px;background:url('../img/common/thingy.png');margin:0 auto;margin-top:-10px;top:10px;position:relative;} .alert {height:50px;background:#d83939;width:100%;color:#eee;font-size:20px;font-family:'GraphicPixel', arial, sans-serif;text-align:center;line-height:50px;border-bottom:1px solid #000;} #instructions, #achievements, #lists, #about, #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 {display:block;font-style:normal;} #legal p {width:75%;font-size:25px;line-height:35px;} #legal p a {color:#2e7fdd;text-decoration:none;} #close-legal {font-size:20px;margin-top:30px;} #toggle-legal, #legal-link a {padding:0 10px;} #createcharacter form {position:relative;} #name-tooltip {width:400px;height:30px;padding:10px 0;font-size:20px;background:#373737;position:absolute;left:50%;margin-left:-200px;color:#fff;border-radius:8px;line-height:30px;top:-40px;opacity:0;-moz-transition:0.25s opacity ease;-webkit-transition:0.25s opacity ease;-o-transition:0.25s opacity ease;-ms-transition:0.25s opacity ease;transition:0.25s opacity ease;pointer-events:none;} #name-tooltip:after {content:url('../img/common/arrow.png');width:28px;height:16px;position:absolute;bottom:-8px;left:50%;margin-left:-14px;} #name-tooltip.visible {opacity:.9;} .opera #name-tooltip {display:none;} .opera #name-tooltip.visible {display:block;} /* Magic Parchment */ .parchment-left {position:absolute;top:0;left:0%;} .parchment-right {position:absolute;top:0;right:0%;} .parchment-middle {position:absolute;left:50%;top:0;} .animate .parchment-left {-moz-animation:parchleft 1s ease 1;-webkit-animation:parchleft 1s ease 1;-o-animation:parchleft 1s ease 1;-ms-animation:parchleft 1s ease 1;animation:parchleft 1s ease 1;} .animate .parchment-right {-moz-animation:parchright 1s ease 1;-webkit-animation:parchright 1s ease 1;-o-animation:parchright 1s ease 1;-ms-animation:parchright 1s ease 1;animation:parchright 1s ease 1;} #credits, #createcharacter, #loadcharacter, #confirmation, #death, #error, #about, #legal {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, .about #about, .legal #legal {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;} /* States & Transitions */ #intro {-moz-transition:0.4s opacity linear;-webkit-transition:0.4s opacity linear;-o-transition:0.4s opacity linear;-ms-transition:0.4s opacity linear;transition:0.4s opacity linear;} #mask, #logo, #parchment {opacity:0;} .intro #logo, .intro #parchment {opacity:1;} .game #confirmation, .game #loadcharacter, .game #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 #about {opacity:0;-moz-transition:0s opacity linear 0s;-webkit-transition:0s opacity linear 0s;-o-transition:0s opacity linear 0s;-ms-transition:0s opacity linear 0s;transition:0s opacity linear 0s;} .game.credits #credits, .game.death #death, .game.about #about, .game.legal #legal {opacity:1;-moz-transition:0.5s opacity linear 0.5s;-webkit-transition:0.5s opacity linear 0.5s;-o-transition:0.5s opacity linear 0.5s;-ms-transition:0.5s opacity linear 0.5s;transition:0.5s opacity linear 0.5s;} .game.credits #parchment, .game.death #parchment, .game.about #parchment, .game.legal #parchment {opacity:1;-moz-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-webkit-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-o-transition:0.5s opacity linear 0s, 0s z-index linear 0s;-ms-transition:0.5s opacity linear 0s, 0s z-index linear 0s;transition:0.5s opacity linear 0s, 0s z-index linear 0s;z-index:200;} .game .parchment-left {-moz-transition:0.5s left ease;-webkit-transition:0.5s left ease;-o-transition:0.5s left ease;-ms-transition:0.5s left ease;transition:0.5s left ease;left:41%;} .game .parchment-right {-moz-transition:0.5s right ease;-webkit-transition:0.5s right ease;-o-transition:0.5s right ease;-ms-transition:0.5s right ease;transition:0.5s right ease;right:41%;} .game .parchment-middle {-moz-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-webkit-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-o-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;-ms-transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;transition:0.5s width ease, 0.5s margin-left ease, 0.5s background-position ease;width:0px;margin-left:0px;} .game.credits .parchment-left, .game.death .parchment-left, .game.about .parchment-left, .game.legal .parchment-left {left:0%;} .game.credits .parchment-right, .game.death .parchment-right, .game.about .parchment-right, .game.legal .parchment-right {right:0%;} #container {z-index:100;background:rgba(0,0,0,0.2);-moz-transition:1s opacity linear 0.5s;-webkit-transition:1s opacity linear 0.5s;-o-transition:1s opacity linear 0.5s;-ms-transition:1s opacity linear 0.5s;transition:1s opacity linear 0.5s;} .intro #container {opacity:0;pointer-events:none;} .game #container {opacity:1;} #logo, #parchment {-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;-ms-transition:0.5s opacity linear;transition:0.5s opacity linear;} @-moz-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }} @-webkit-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }} @-o-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }} @-ms-keyframes flash { 0% {background:#ffa2a2;} 100% {background:#e22525; }} @-moz-keyframes glow { from {color:#fcda5c;} to {color:#fff;} } @-webkit-keyframes glow { from {color:#fcda5c;} to {color:#fff;} } @-o-keyframes glow { from {color:#fcda5c;} to {color:#fff;} } @-ms-keyframes glow { from {color:#fcda5c;} to {color:#fff;} } @-moz-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }} @-webkit-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }} @-o-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }} @-ms-keyframes logo1 { from { background-position: 0 -42px; } to { background-position: 0 -294px; }} @-moz-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }} @-webkit-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }} @-o-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }} @-ms-keyframes logo2 { from { background-position: 0 -84px; } to { background-position: 0 -588px; }} @-moz-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }} @-webkit-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }} @-o-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }} @-ms-keyframes logo3 { from { background-position: 0 -126px; } to { background-position: 0 -882px; }} @-moz-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }} @-webkit-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }} @-o-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }} @-ms-keyframes parchleft { 0% { left:0%; } 45% { left:41%; } 55% { left:41%; } 100% { left:0%; }} @-moz-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }} @-webkit-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }} @-o-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }} @-ms-keyframes parchright { 0% {right:0%; } 45% { right:41%; } 55% { right:41%; } 100% { right:0%; }} @-moz-keyframes parchmiddle3 { 0% {width:1038px;margin-left:-519px;background-position:-114px -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;} } @-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;} } @-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;} } @-moz-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }} @-webkit-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }} @-o-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }} @-ms-keyframes coinsparks1 { from { background-position: -216px -248px; } to { background-position: -360px -248px; }} @-moz-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }} @-webkit-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }} @-o-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }} @-ms-keyframes coinsparks2 { from { background-position: -432px -496px; } to { background-position: -720px -496px; }} @-moz-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }} @-webkit-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }} @-o-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }} @-ms-keyframes coinsparks3 { from { background-position: -648px -744px; } to { background-position: -1080px -744px; }} @-moz-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} } @-webkit-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} } @-o-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} } @-ms-keyframes invincible { from {background:#fa6a00;} to {background:#fabc00;} } @media screen and (min-width: 1501px) { .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 #about .img, .upscaled .ext-link {background-image:url('../img/3/spritesheet.png');} .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #population div{background-image:url('../img/3/barsheet.png');} .upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/3/achievements.png');} body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood2.png') no-repeat 1587px 138px, url('../img/1/wood2.png') no-repeat 51px 519px, url('../img/1/wood3.png') no-repeat 228px 219px, url('../img/1/wood.png') repeat, #000; background-size:auto, 15px auto, 15px auto, 60px auto, 384px;} body {background:-webkit-gradient(radial, center center, 360, center center, 1200, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/3/wood2.png') no-repeat 1587px 138px, url('../img/3/wood2.png') no-repeat 51px 519px, url('../img/3/wood3.png') no-repeat 228px 219px, url('../img/3/wood.png') repeat, #000; background-size:auto, 15px auto, 15px auto, 60px auto, 384px;} #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .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;-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, #legal {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:61px;} #parchment.createcharacter input {margin-top:20px;height:50px;} #createcharacter .play {margin: 10px auto 10px auto;} .button {height:153px;width:375px;background-position:-687px -306px;margin:30px auto 0 auto;position:relative;} .play div {height:153px;width:375px;background-position:-687px 0px;} .play div:active {background-position:-687px -459px;} .play.loading div {background-position:-681px -2178px;} .play.loading img {width:24px;height:24px;} .stroke, .achievement-name {text-shadow:3px 3px 0 #373737, 3px -3px 0 #373737, 0 3px 0 #373737, 3px 0 0 #373737, -3px 3px 0 #373737, -3px -3px 0 #373737, 0 -3px 0 #373737, 0 3px 0 #373737, -3px 0 0 #373737;} #loadcharacter h1, #confirmation h1, #error h1, #legal 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;} #legal p {margin:50px auto 0;} #error p {width:70%;margin:60px auto 0;} .button.delete {background-position:-687px -153px;} .button.delete:active {background-position:0 -2178px;} .validation-error {font-size:22px;} #container {width:1470px;margin:0 auto;position:absolute;top:50%;margin-top:-378px;left:50%;margin-left:-735px;} #expbar{ position: absolute; bottom: 8.5%; left: 98%; width: 1%; background: rgba(0,0,255,0.3); height: 90%; margin-left: 0px; padding: 0px; border: 0px; } #canvasborder {padding:15px;background:url('../img/3/border.png') no-repeat;} #canvas {width:100%;height:672px;} #fade {width:1440px;height:672px;top:15px;left:15px;} #instructions {height:516px;width:1251px;background-position:0 -1581px;margin-left:-624px;margin-top:-279px;color:#373737;} #instructions h1 {font-size:40px;text-align:center;margin:50px 0;} #instructions ul {font-size:30px;margin-top:30px;} #instructions ul li {margin:20px 0; clear:left;} #instructions li:nth-child(1) span {height:87px;width:45px;background-position:-1134px -36px; display:block;float:left;margin: 0 30px 9px 60px;position: relative;top: -39px;} #instructions li:nth-child(2) span {height:48px;width:39px;background-position:-1179px -36px; display:block;float:left;margin: 0 36px 42px 60px;position: relative;top: -9px;} #instructions li:nth-child(3) span {height:63px;width:48px;background-position:-1218px -36px; display:block;float:left;margin: 0 27px 0 60px;position: relative;top: -18px;} #instructions p {text-align:center;font-family:'GraphicPixel';font-size:20px;clear:left;margin-top:50px;} #playerimage {height: 96px; width: 96px;} .close {height:48px;width:48px;top:-12px;right:-15px;background-position:-1062px -378px;} .close:hover {background-position:-1110px -378px;} .close:active {background-position:-1158px -378px;} .ribbon {width:54px;right:30px;top:12px;} .ribbon .top {width:100%;height:18px;background-position:-1143px -516px;} .ribbon .bottom {width:100%;height:66px;background-position:-1143px -555px;} .ribbon:hover .top {height:30px;} .ribbon:hover .bottom {background-position:-1197px -555px;} #createcharacter .ribbon {right:30px;top:12px;} #loadcharacter .ribbon {right:148px;top:-13px;} /*Death & Respawn*/ #death p {font-size:30px;margin-top:140px;} #death 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*/ #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;} /*GUI Bar*/ #bar-container {height:51px;top:-3px;background-size:1440px;} #healthbar {height:39px;background-position:0 -51px;width:306px;top:9px;background-size:1440px;z-index:20;} #hitpoints {width:0px;height:33px;top:12px;left:33px;z-index:10;position:absolute;} #hpguide {left: 33px; top: 12px; width: 2px; height: 33px; z-index: 30; } #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;} #playercount {font-size:20px;left:1076px;top:18px;width:172px;text-align:center;} #population {width:393px;right:105px;bottom:66px;font-size:20px;line-height:30px;} #population div{background-size:1440px;background-position:-720px -156px;} #instance-population{background-size:1440px; background-position:-720px -144px !important;padding-top: 12px;} .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;} #helpbutton {background-position:-558px -51px;top:3px;left:1350px;} #helpbutton:hover {background-position:-600px -51px;} #helpbutton.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;background:none;width:90%;border:0;margin-left:2%;padding:16px 0;} /*Credits*/ #credits, #death, #about {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, #about h1 {margin-top:35px;font-weight:normal;} #credits h1 a {font-size:36px;} .game #credits h1, .game #about h1 {margin-top:52px;} #credits h1 span.title {max-width:300px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;top:36px;} #authors {clear:both;margin-top:100px;} #guillaume, #franck {width:47%;line-height:36px;} #guillaume {float:left;text-align:right;} #franck {float:right;text-align:left;} .avatar {height:75px;width:39px;} #guillaume .avatar {float:right;background-position:-1062px -303px;margin-left:60px;} #franck .avatar {float:left;background-position:-1101px -303px;margin-right:60px;} #seb {margin:270px auto 0 auto;width:54%;color:#373737;font-size:25px;} #seb a {color:#373737;text-decoration:none;} #seb a:hover {color:#397cd8;} #note {float:left;background-position:-1203px -336px;height:33px;width:30px;} #close-credits {margin:45px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;} #sharing {width:240px;} /*About*/ #about h1 span.title {max-width:400px;display:inline-block;line-height:39px;margin-top:-90px;position:relative;} #close-about {margin:230px auto 0 auto;text-align:center;clear:both;font-size:20px;color:#373737;} #about #game-desc {font-size:28px;text-align:center;max-width:70%;margin:30px auto;line-height:34px;} #about .left p, #about .right p {font-size:20px;text-align:left;line-height:26px;padding:0;margin-top:-10px;} #about .left {width:31%;float:left;margin-left:12%;} #about .right {width:37%;float:right;margin-right:12%;} #about .left .img {height:90px;width:81px;float:left;background-position:-1062px -516px;margin-right:20px;} #about .right .img {height:90px;width:168px;float:left;background-position:-1062px -426px;margin-right:20px;} #about .link {clear:both;font-size:20px;margin:30px 0;display:block;text-align:left;line-height:16px;} #about .link a {color:#2e7fdd;text-decoration:none;} #about .link .ext-link {height:18px;width:18px;background-position:-1197px -516px;display:block;float:left;margin-right:10px;} .animate .parchment-middle {-moz-animation:parchmiddle3 1s ease 1;-webkit-animation:parchmiddle3 1s ease 1;-o-animation:parchmiddle3 1s ease 1;-ms-animation:parchmiddle3 1s ease 1;} .game .parchment-middle {background-position: -633px -882px;} .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:1038px;margin-left:-519px;background-position: -114px -882px;} footer {font-size:20px;} #resize-check {height:3px;} } @media screen and (max-width: 1500px), 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 #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 #about .img, .upscaled .ext-link {background-image:url('../img/2/spritesheet.png');} .upscaled #bar-container, .upscaled #healthbar, .upscaled .barbutton, .upscaled #chatbox, .upscaled #population div{background-image:url('../img/2/barsheet.png');} .upscaled #achievements, .upscaled #achievements li, .upscaled .coin, .upscaled #achievement-notification, .upscaled #coinsparks, .upscaled .achievement-sharing a, .upscaled #previous, .upscaled #next {background:url('../img/2/achievements.png');} body {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 256px;} body {background:-webkit-gradient(radial, center center, 240, center center, 800, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/2/wood.png') repeat, #000; background-size:auto, 256px;} #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:844px auto;} #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;} #logosparks {width:458px;height:84px;z-index:4;-moz-animation:logo2 .8s steps(6, end) infinite;-webkit-animation:logo2 .8s steps(6, end) infinite;-o-animation:logo2 .8s steps(6, end) infinite;-ms-animation:logo2 .8s steps(6, end) infinite;} #parchment, #loadcharacter, #confirmation, #error, #legal {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:41px;} #parchment.createcharacter input {margin-top:15px;height:30px;} #createcharacter .play {margin: 8px auto 8px auto;} .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 {height:16px;width:16px;} .stroke, .achievement-name {text-shadow:2px 2px 0 #373737, 2px -2px 0 #373737, 0 2px 0 #373737, 2px 0 0 #373737, -2px 2px 0 #373737, -2px -2px 0 #373737, 0 -2px 0 #373737, 0 2px 0 #373737, -2px 0 0 #373737;} #loadcharacter h1, #confirmation h1, #error h1, #legal 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;} #legal p {margin:30px auto 0;font-size:16px;line-height:24px;} #error p {width:70%;margin:40px auto 0;} .button.delete {background-position:-458px -102px;} .button.delete:active {background-position:0 -1452px;} .validation-summary {margin:0 auto .5em auto;} .validation-error {font-size:16px;} #container {width:980px;margin:0 auto;position:absolute;top:50%;margin-top:-252px;left:50%;margin-left:-490px;} #expbar{ position: absolute; bottom: 8.5%; left: 98.6%; width: 0.5%; background: rgba(0,0,255,0.3); height: 90%; margin-left: 0px; padding: 0px; border: 0px; } #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;} #instructions {height:344px;width:834px;background-position:0 -1054px;margin-left:-416px;margin-top:-186px;color:#373737;} #instructions h1 {font-size:30px;text-align:center;margin:40px 0;} #instructions ul {font-size:20px;margin-top:40px;} #instructions ul li {margin:20px 0; clear:left;} #instructions li:nth-child(1) span {height:58px;width:30px;background-position:-756px -24px; display:block;float:left;margin: 0 20px 6px 40px;position: relative;top: -26px;} #instructions li:nth-child(2) span {height:32px;width:26px;background-position:-786px -24px; display:block;float:left;margin: 0 24px 28px 40px;position: relative;top: -6px;} #instructions li:nth-child(3) span {height:42px;width:32px;background-position:-812px -24px; display:block;float:left;margin: 0 18px 0 40px;position: relative;top: -12px;} #instructions p {text-align:center;font-family:'GraphicPixel';font-size:20px;clear:left;margin-top:20px;} #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;} #close-legal {font-size:14px;margin-top:30px;} /*Death & Respawn*/ #death p {font-size:20px;margin-top:90px;} #death 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*/ #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;} /*GUI Bar*/ #bar-container {height:34px;top:-2px;background-size:960px;} #healthbar {height:26px;background-position:0 -34px;width:204px;top:6px;background-size:960px;z-index:20;} #hitpoints {width:0px;height:22px;top:8px;left:22px;z-index:10;position:absolute;} #hpguide {left: 22px; top: 8px; width: 2px; height: 22px; z-index: 30; } #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 {right:70px;bottom:44px;width:262px;font-size:14px;line-height:20px;} #population div{background-size:960px;background-position:-480px -104px;} #instance-population{background-position:-480px -98px !important;padding-top: 6px;} .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;} #helpbutton {background-position:-372px -34px;top:2px;left:900px;} #helpbutton:hover {background-position:-400px -34px;} #helpbutton.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:14px;background:none;width:90%;border:0;margin-left:2%;padding:8px 0;} /*Credits*/ #credits, #death, #about {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, #about h1 {margin-top:25px;font-weight:normal;} #credits h1 a {font-size:24px;} .game #credits h1, .game #about 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;} /*About*/ #about h1 span.title {max-width:400px;display:inline-block;line-height:24px;margin-top:-90px;position:relative;} #close-about {margin:153px auto 0 auto;text-align:center;clear:both;font-size:14px;color:#373737;} #about #game-desc {font-size:18px;text-align:center;max-width:70%;margin:25px auto;line-height:24px;} #about .left p, #about .right p {font-size:14px;text-align:left;line-height:20px;padding:0;margin-top:-8px;} .windows #about .left p, .windows #about .right p {font-size:13px;text-align:left;line-height:20px;padding:0;margin-top:-10px;} #about .left {width:31%;float:left;margin-left:12%;} #about .right {width:37%;float:right;margin-right:12%;} #about .left .img {height:60px;width:54px;float:left;background-position:-708px -344px;margin-right:14px;} #about .right .img {height:60px;width:112px;float:left;background-position:-708px -284px;margin-right:14px;} #about .link {clear:both;font-size:14px;margin:20px 0;display:block;text-align:left;line-height:10px;} #about .link a {color:#2e7fdd;text-decoration:none;} #about .link .ext-link {height:12px;width:12px;background-position:-798px -344px;display:block;float:left;margin-right:7px;} .animate .parchment-middle {-moz-animation:parchmiddle2 1s ease 1;-webkit-animation:parchmiddle2 1s ease 1;-o-animation:parchmiddle2 1s ease 1;-ms-animation:parchmiddle2 1s ease 1;} .game .parchment-middle {background-position: -422px -588px;} .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:692px;margin-left:-346px;background-position: -76px -588px;} footer {font-size:16px;} #resize-check {height:2px;} #toggle-legal, #legal-link a {padding:0 8px;} #name-tooltip {font-size:14px;width:280px;margin-left:-140px;height:20px;line-height:18px;top:-30px;} #name-tooltip:after {bottom:-8px;} #expbar{ position: absolute; bottom: 8.5%; left: 98.6%; width: 0.5%; background: rgba(0,0,255,0.3); height: 90%; margin-left: 0px; padding: 0px; border: 0px; } } @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%), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;} body {background:-webkit-gradient(radial, center center, 200, center center, 600, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;} #logo, #logosparks, .left-ornament, .right-ornament, #character, #character div, .button, .button div, #respawn, #scroll, #instructions, .icon, .avatar, .close, #note, .ribbon .top, .ribbon .bottom, #about .img, .ext-link {background-size:422px auto;} #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;} #logosparks {width:229px;height:42px;z-index:4;-moz-animation:logo1 .8s steps(6, end) infinite;-webkit-animation:logo1 .8s steps(6, end) infinite;-o-animation:logo1 .8s steps(6, end) infinite;-ms-animation:logo1 .8s steps(6, end) infinite;} #parchment, #loadcharacter, #confirmation, #error, #legal {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, #instructions 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:21px;} #parchment.createcharacter input {margin-top:4px;height:15px;} .button {height:51px;width:125px;background-position:-229px -102px;margin:10px auto 0 auto;position:relative;} .play div {height:51px;width:125px;background-position:-229px 0px;} .play div:active {background-position:-229px -153px;} .play.loading div {background-position:-227px -726px;} .play.loading img {height:11px;width:11px;} .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, #legal h1 {margin-top:20px;} #playername {margin-top:5px;} .loadcharacter .play, .confirmation .delete {margin:5px auto 5px auto;} #confirmation p, #error p, #legal p {font-size:10px;margin-top:20px;line-height:20px;} #legal p {margin:20px auto 0;line-height:12px;} #error p {width:70%;margin:40px auto 0;} .button.delete {background-position:-229px -51px;} .button.delete:active {background-position:0 -726px;} .validation-error {font-size:11px;} #container {width:490px;margin:0 auto;position:absolute;top:50%;margin-top:-126px;left:50%;margin-left:-245px;} #canvasborder {padding:5px;background:url('../img/1/border.png') no-repeat;} #canvas {width:100%;height:224px;} #fade {width:480px;height:224px;top:5px;left:5px;} #instructions {height:172px;width:417px;background-position:0 -527px;margin-left:-208px;margin-top:-93px;color:#373737;} #instructions h1 {font-size:20px;text-align:center;margin-bottom:0;} #instructions ul {font-size:10px;margin-top:10px;} #instructions ul li {margin:10px 0; clear:left;} #instructions li:nth-child(1) span {height:29px;width:15px;background-position:-378px -12px; display:block;float:left;margin: 0 10px 3px 20px;position: relative;top: -13px;} #instructions li:nth-child(2) span {height:16px;width:13px;background-position:-393px -12px; display:block;float:left;margin: 0 12px 14px 20px;position: relative;top: -3px;} #instructions li:nth-child(3) span {height:21px;width:16px;background-position:-406px -12px; display:block;float:left;margin: 0 9px 0 20px;position: relative;top: -6px;} #instructions p {text-align:center;font-family:'GraphicPixel';font-size:10px;clear:left;margin:0;} #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;} #close-legal {font-size:10px;margin-top:10px;} /*Death & Respawn*/ #death p {font-size:10px;margin-top:45px;} #death 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*/ #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;} /*GUI Bar*/ #bar-container {height:17px;top:-1px;background-size:480px;} #healthbar {height:13px;background-position:0 -17px;width:102px;top:3px;background-size:480px;z-index:20;} #hitpoints {width:0px;height:11px;top:4px;left:11px;z-index:10;position:absolute;} #hpguide {left: 11px; top: 4px; width: 1px; height: 11px; z-index: 30; } #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 {right:35px;bottom:22px;width:130px;font-size:9px;line-height:12px;} #population div{background-size:480px;background-position:-240px -52px;} #instance-population{padding-top:4px;background-position:-240px -48px !important;} .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;} #helpbutton {background-position:-186px -17px;top:1px;left:450px;} #helpbutton:hover {background-position:-200px -17px;} #helpbutton.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;background:none;width:90%;border:0;margin-left:2%;padding:0;} /*Credits*/ #credits, #death, #about {width:422px;height:182px;top:50%;margin-left:-211px;margin-top:-91px;font-size:10px;} #credits h1 a {font-size:12px;} .parchment-left, .parchment-right, .parchment-middle {background-size:422px;} .parchment-left {width:38px;height: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, #about h1 {margin-top:12px;font-weight:normal;} .game #credits h1, .game #about h1 {margin-top:20px;} #credits h1 span.title {max-width:100px;display:inline-block;line-height:13px;margin-top:-30px;position:relative;top:12px;} #authors {clear:both;margin-top:36px;} #guillaume, #franck {width:47%;line-height:13px;} #guillaume {float:left;text-align:right;} #franck {float:right;text-align:left;} .avatar {height:25px;width:13px;} #guillaume .avatar {float:right;background-position:-354px -101px;margin-left:20px;} #franck .avatar {float:left;background-position:-367px -101px;margin-right:20px;} #seb {margin:90px auto 0 auto;width:64%;color:#373737;font-size:10px;} #seb a {color:#373737;text-decoration:none;} #seb a:hover {color:#397cd8;} #note {float:left;background-position:-401px -112px;height:11px;width:10px;} #close-credits {margin:12px auto 0 auto;text-align:center;clear:both;font-size:10px;} #sharing {width:202px;} /*About*/ #about h1 span.title {max-width:400px;display:inline-block;line-height:24px;margin-top:-30px;position:relative;margin-bottom:-10px;} #close-about {margin:77px auto 0 auto;text-align:center;clear:both;font-size:10px;color:#373737;} #about #game-desc {font-size:10px;text-align:center;max-width:70%;margin:10px auto;line-height:14px;} #about .left p, #about .right p {font-size:9px;text-align:left;line-height:10px;padding:0;margin-top:-6px;} #about .left {width:37%;float:left;margin-left:10%;} #about .right {width:37%;float:right;margin-right:12%;} /* #about .left .img {height:30px;width:27px;float:left;background-position:-354px -172px;margin-right:7px;} #about .right .img {height:30px;width:56px;float:left;background-position:-354px -142px;margin-right:7px;}*/ #about .img {display:none;} #about .link {clear:both;font-size:9px;margin:10px 0;display:block;text-align:left;line-height:5px;} #about .link a {color:#2e7fdd;text-decoration:none;} #about .link .ext-link {height:6px;width:6px;background-position:-399px -172px;display:block;float:left;margin-right:4px;} .animate .parchment-middle {-moz-animation:parchmiddle1 1s ease 1;-webkit-animation:parchmiddle1 1s ease 1;-o-animation:parchmiddle1 1s ease 1;-ms-animation:parchmiddle1 1s ease 1;} .game .parchment-middle {background-position: -211px -294px;} .game.credits .parchment-middle, .game.death .parchment-middle, .game.about .parchment-middle, .game.legal .parchment-middle {width:346px;margin-left:-173px;background-position: -38px -294px;} #resize-check {height:1px;} #name-tooltip {font-size:10px;width:180px;margin-left:-90px;height:10px;line-height:10px;top:-30px;border-radius:4px;} #name-tooltip:after {bottom:-8px;} } @media screen and (max-width: 800px) { body {border-top:0px;} .intro #container, .game #logo, .game #parchment {display:none;} .game.about #parchment {display:block;left:50%;background:url('../img/1/spritesheet.png') no-repeat 0 -527px;height:172px;width:417px;top:50%;margin-left:-208px;margin-top:-98px;position:absolute;} .game.about .parchment-middle {top:50%;left:50%;color:#000;position:absolute;} #about .right {width:34%;} #about #game-desc {margin:8px auto 16px;line-height:12px;} #close-about {margin-top:83px;} .game #container {display:block;padding:0;} #mask, #fade {display:none;} .game.death #parchment {display:block;} .game .createcharacter #createcharacter, .game .loadcharacter #loadcharacter, .game .confirmation #confirmation, .game .error #error, .game .legal #legal {display:none;} .ribbon {display:none;} canvas {image-rendering:optimizeSpeed;} #moztab {display:none;} body.intro {background:-moz-radial-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 125%), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;} body.intro {background:-webkit-gradient(radial, center center, 120, center center, 400, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))), url('../img/1/wood.png') repeat, #000; background-size:auto, 128px;} body {background:#000;} #logosparks {-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;display:none;} #container {height: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, #instructions, .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;} #instructions h1 {margin-top:15px;font-size:14px;} .left-ornament, .right-ornament {height:12px;width:31px;display:inline-block;margin:0 10px;position:relative;top:3px;} .left-ornament {background-position:-354px 0;} .right-ornament {background-position:-385px 0;} #character {height:21px;width:12px;margin:0 auto;background-position:-354px -12px;margin-top:15px;position:relative;display:none;} #character div {height:21px;width:12px;position:absolute;top:0;left:0;background-position:-366px -12px;opacity:1;} #character.disabled div {opacity:0;pointer-events:none;} #parchment input {margin-top:10px; padding-bottom:5px; border-bottom:1px dashed #b2af9b; font-size:14px;-moz-animation:none;-webkit-animation:none;-o-animation:none;-ms-animation:none;color:#eee;} #parchment.createcharacter input {margin-top:4px;height:15px;} .button {height:54px;width:204px;background-position:-500px -952px;margin:20px auto 0 auto;position:relative;background-size:844px;} .play, #create-new {font-size:16px;} .play div {height:54px;width:204px;background-position:-458px -512px; background-size:844px;} .play div:active {background-position:0px -1398px;} #create-new {margin-top:0;} .stroke {text-shadow:1px 1px 0 #373737, 1px -1px 0 #373737, 0 1px 0 #373737, 1px 0 0 #373737, -1px 1px 0 #373737, -1px -1px 0 #373737, 0 -1px 0 #373737, 0 1px 0 #373737, -1px 0 0 #373737;} .validation-error {color:#ffc2c2;} #instructions {height:172px;width:417px;background-position:0 -527px;margin-left:-208px;margin-top:-93px;color:#373737;} #instructions h1 {font-size:20px;text-align:center;margin-bottom:0;} #instructions ul {font-size:13px;margin-top:15px;} #instructions ul li {margin:10px 0; clear:left;} #instructions li:nth-child(1) span {height:29px;width:15px;background-position:-378px -12px; display:block;float:left;margin: 0 10px 3px 20px;position: relative;top: -13px;} #instructions li:nth-child(2) span {height:16px;width:13px;background-position:-393px -12px; display:block;float:left;margin: 0 12px 14px 20px;position: relative;top: -3px;} #instructions li:nth-child(3) span {height:21px;width:16px;background-position:-406px -12px; display:block;float:left;margin: 0 9px 0 20px;position: relative;top: -6px;} #instructions p {text-align:center;font-family:'GraphicPixel';font-size:10px;clear:left;margin:0;} #foreground { cursor: default; } #parchment.animate {-moz-animation:none;-webkit-animation:none;-o-animation:none;-webkit-animation:none;} #loadcharacter, #confirmation, #createcharacter, #error, #legal {display:none;margin-top:0;margin-left:0;left:0;width:auto;} .loadcharacter #loadcharacter, .confirmation #confirmation, .createcharacter #createcharacter, .error #error, .legal #legal {display:block;width:100%;} #loadcharacter h1, #confirmation h1, #error h1, #legal h1 {font-size:12px;font-weight:normal;} #loadcharacter, #confirmation, #error, #legal {height:auto;} #loadcharacter h1, #confirmation h1, #createcharacter h1, #error h1, #legal h1 {font-size:12px;} #createcharacter{padding-bottom:20px;} #playername {font-size:20px;margin:10px 0px;} #continue {margin:20px 0px;font-size:16px;} #cancel {margin:20px 0;font-size:16px;} .button.delete {background-position:-612px -1398px;} .button.delete:active {background-position:-250px -1452px;} #confirmation, #error {top:70%;} #confirmation p, #error p {margin:10px 0;line-height:12px;font-size:12px;} #playerimage {display:none;} /*GUI Bar*/ #bar-container {height:34px;top:-2px;background-size:960px;background-position:0 -96px;} #healthbar {height:26px;background-position:0 -34px;width:204px;top:6px;background-size:960px;z-index:20;} #hitpoints {width:0px;height:22px;top:8px;left:22px;z-index:10;position:absolute;} #hpguide {left: 22px; top: 8px; width: 2px; height: 22px; z-index: 30; } #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;} #helpbutton {background-position:-372px -34px;top:2px;left:420px;} #helpbutton:hover {background-position:-400px -34px;} #helpbutton.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:14px;background:none;width:90%;border:0;margin-left:2%;padding:4px 0;} /*Credits*/ .parchment-left, .upscaled .parchment-left, .parchment-middle, .upscaled .parchment-middle, .parchment-right, .upscaled .parchment-right {background:none;} .parchment-left, .parchment-right {display:none;} .parchment-middle {width:100%;left:0px;margin-left:0px;height:auto;position:relative;} #toggle-credits, #credits {display:none;} .game.death #parchment {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;} #instructions, #achievements, #lists, #about {-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;} #sharing, #credits-link, .dash {display:none;} #legal-link .dash {display:inline;} #bubbles {overflow:hidden;} .intro footer, .intro footer {display:block;} footer {display:none;position:absolute;top:290px;left:0;z-index:9000;height:30px;width:100%;bottom:auto;} .returning footer, .returning footer {top:300px;} #close-legal {display:none;} #privacy-link span:hover, #legal-link span:hover {color:#C6C0A3;} #legal p {font-size:12px;width:80%;line-height:14px;} #name-tooltip {display:none;} } @media screen and (max-width: 800px) and (orientation: portrait) { #portrait {display:block;height:300px;width:300px;position:absolute;top:55%; left:50%; margin:-150px 0 0 -150px;} #parchment {display:none;} #container, .game #container {display:none;} #logo {height:84px;width:458px;position:absolute;top:10%;left:50%;margin-left:-229px;z-index:3;background-size:844px;} #portrait p {color:#eee;font-family:'GraphicPixel', sans-serif;font-size:20px;text-align:center;} #tilt {height:120px;width:132px;background-position:-710px -82px;background-size:844px;margin:25px auto 0 auto;} .intro #toggle-legal, #toggle-legal, .intro #legal-link, #legal-link {display:none;} } @media screen and (max-width: 640px) and (orientation: portrait) { #portrait {display:block;height:300px;width:300px;position:absolute;top:70%; left:50%; margin:-150px 0 0 -150px;} #logo {height:42px;width:229px;position:absolute;top:10%;left:50%;margin-left:-114px;z-index:3;background-size:422px;} } /* Tablet mode */ .tablet .animate .parchment-left, .tablet .animate .parchment-right, .tablet .animate .parchment-middle {-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;} .tablet #instructions, .tablet #achievements, .tablet #lists {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;} .tablet #achievements li.unlocked .achievement-sharing {display:block;} .tablet #coinsparks {display:none; -moz-animation:none;} .tablet #logo, .tablet #parchment, .tablet #container {-moz-transition:none;} .tablet #achievement-notification .name, .tablet #achievement-notification .title, .tablet #achievement-notification .coin, .tablet #achievement-notification {-moz-transition:none;} /* Workarounds for chrome windows bugs */ .windows #parchment, .windows #parchment input, .windows #notifications, .windows #instructions, .windows #achievements, .windows #achievement-notification, .windows #playercount, .windows #credits, .windows #loadcharacter, .windows #confirmation, .windows #death, .windows #error, .windows #about, .windows #legal, .windows #parchment p, .windows #portrait p, .windows .alert, .windows footer, .windows .bubble p, .windows #population, .windows #chatinput {font-family:'AdvoCut';} /* Workarounds for opera's lack of pointer-events support */ .opera.intro #bubbles, .opera.intro #canvas, .opera.intro #container { z-index: -30000;} .opera .credits #credits, .opera .createcharacter #createcharacter, .opera .loadcharacter #loadcharacter, .opera .confirmation #confirmation, .opera .death #death, .opera .error #error, .opera .about #about, .opera .legal #legal { 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 #about, .opera #credits, .opera #error, .opera #confirmation, .opera #loadcharacter, .opera #legal { z-index: -30000; }