/* http://jellystyle.com/library/themes/stylish/style.css */
@font-face { font-family: "AurulentSans"; src: url('http://jellystyle.com/library/themes/stylish/fonts/AurulentSans.otf') format('opentype'); } @font-face { font-family: "Vera"; src: url('http://jellystyle.com/library/themes/stylish/fonts/Vera.ttf') format('truetype'); } @font-face { font-family: "Vera"; font-weight: bold; src: url('http://jellystyle.com/library/themes/stylish/fonts/Vera-Bold.ttf') format('truetype'); } @font-face { font-family: "Vera"; font-style: italic; src: url('http://jellystyle.com/library/themes/stylish/fonts/Vera-Italic.ttf') format('truetype'); } @font-face { font-family: "Vera"; font-weight: bold; font-style: italic; src: url('http://jellystyle.com/library/themes/stylish/fonts/Vera-Bold-Italic.ttf') format('truetype'); } body { background-color: #FFF; background-image: url('http://jellystyle.com/library/themes/stylish/images/body.paper.png'); background-position: 0 bottom; background-repeat: repeat; } body, body * { font: 11px "Vera", "Tahoma", sans-serif; } div.controls.left { position: fixed; top: 40%; left: 10px; z-index: 1000000000; } div.controls.right { position: fixed; top: 40%; right: 10px; z-index: 1000000000; } div.modal.console { position: fixed; top: 10%; right: 30%; height: 80%; width: 40%; z-index: 1000000000; background-color: rgba(255,255,255,0.8); } div.controls div.button-up, div.controls div.button-down, div.controls div.button-left, div.controls div.button-right, div.controls div.button-a, div.controls div.button-b { position: absolute; display: block; height: 90px; width: 90px; background-image: url('http://jellystyle.com/library/themes/stylish/images/buttons.png'); -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } div.controls div.button-up { background-position: -90px 0; } div.controls div.button-down { background-position: -90px -90px; } div.controls div.button-left { background-position: 0 0; } div.controls div.button-right { background-position: -180px 0; } div.controls div.button-a { background-position: 0 -90px; } div.controls div.button-b { background-position: -180px -90px; } div.controls.left div.button-up, div.controls.left div.button-down, div.controls.left div.button-left, div.controls.left div.button-right, div.controls.left div.button-a, div.controls.left div.button-b { top: 0; left: 0; } div.controls.left div.button-up { } div.controls.left div.button-down { top: 300px; } div.controls.left div.button-left { top: 100px; } div.controls.left div.button-right { top: 100px; left: 100px; } div.controls.left div.button-a { top: 200px; left: 100px; } div.controls.left div.button-b { top: 200px; } div.controls.right div.button-up, div.controls.right div.button-down, div.controls.right div.button-left, div.controls.right div.button-right, div.controls.right div.button-a, div.controls.right div.button-b { top: 0; right: 0; } div.controls.right div.button-up { } div.controls.right div.button-down { top: 300px; } div.controls.right div.button-left { top: 100px; right: 100px; } div.controls.right div.button-right { top: 100px; } div.controls.right div.button-a { top: 200px; right: 100px; } div.controls.right div.button-b { top: 200px; } div.content { width: 100%; padding: 0; margin: 0; text-align: center; } div.content div.content-layer-1 { width: 800px; margin: 0 auto; padding: 0 0 48px; text-align: left; } div.footer { position: fixed; bottom: 0; width: 100%; height: 40px; padding: 0; margin: 0; color: #322A19; z-index: 1000; } div.footer p, div.footer p * { font-size: 11px; line-height: 20px; color: rgba( 0, 0, 0, 0.5 ); } div.footer p { margin: 12px 10px 8px; padding: 0 5px; background-color: rgba( 255, 255, 255, 0.5 ); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } div.footer p.copyright { float: right; } div.footer p.hireme { float: left; } div.structure.game { position: fixed; bottom: -32px; left: 0; width: 100%; height: 100%; z-index: 100; overflow: hidden; } div.structure.game div.layer-group { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; overflow: hidden; } div.structure.game div.game-layer { overflow: hidden; } div.structure.game div.background-layer { position: absolute; bottom: 0; left: 0; z-index: -10; } div.structure.game div.mountains-layer { position: absolute; bottom: 0; left: 0; background-image: url('http://jellystyle.com/library/themes/stylish/images/body.mountains.png'); background-position: 0 bottom; background-repeat: repeat-x; z-index: -10; } div.structure.game div.clouds-layer { position: absolute; bottom: 0; left: 0; background-image: url('http://jellystyle.com/library/themes/stylish/images/body.mountains.png'); background-position: 0 bottom; background-repeat: repeat-x; z-index: -10; } div.structure.game div.foreground-layer { position: absolute; bottom: 0; left: 0; } div.structure.game div.stage-layer { position: absolute; bottom: 0; left: 0; z-index: 200; } div.structure.game div.block { background-image: url('http://jellystyle.com/library/themes/stylish/images/blocks.png'); background-repeat: no-repeat; z-index: 200; } div.structure.game div.block-1 { background-position: 0 0; } div.structure.game div.block-2 { background-position: -72px 0; } div.structure.game div.block-3 { background-position: -144px 0; } div.structure.game div.block-4 { background-position: -216px 0; } div.structure.game div.block-5 { background-position: -288px 0; } div.structure.game div.block-6 { background-position: -360px 0; } div.structure.game div.block-7 { background-position: -432px 0; } div.structure.game div.block-8 { background-position: -504px 0; } div.structure.game div.block-9 { background-position: 0 -72px; } div.structure.game div.block-a { background-position: -72px -72px; } div.structure.game div.block-b { background-position: -144px -72px; } div.structure.game div.block-c { background-position: -216px -72px; } div.structure.game div.block-d { background-position: -288px -72px; } div.structure.game div.block-e { background-position: -360px -72px; } div.structure.game div.block-f { background-position: -432px -72px; } div.structure.game div.block-g { background-position: -504px -72px; } div.structure.game div.enemies-layer { position: absolute; bottom: 0; left: 0; z-index: 300; } div.structure.game div.mascot-layer { position: absolute; bottom: 0; left: 0; z-index: 400; } div.mascot-layer div.sprite-trap { position: absolute; display: block; width: 192px; height: 400px; } div.mascot-layer div.mascot-sprite { position: absolute; bottom: 72px; left: 72px; width: 64px; } div.mascot-layer div.mascot-sprite div.jelly { position: relative; display: block; width: 64px; height: 128px; background-image: url('http://jellystyle.com/library/themes/stylish/images/jelly.run.gif'); background-position: -4px 0; background-repeat: no-repeat; } div.mascot-layer div.mascot-sprite.right div.jelly, div.mascot-layer div.mascot-sprite.left.running-left.running-right div.jelly { width: 64px; background-position: -4px 0; } div.mascot-layer div.mascot-sprite.left div.jelly, div.mascot-layer div.mascot-sprite.right.running-left.running-right div.jelly { width: 64px; background-position: -8px -128px; } div.mascot-layer div.mascot-sprite.running-right div.jelly { width: 76px; margin: 0 -8px 0 -4px; background-position: -76px 0; } div.mascot-layer div.mascot-sprite.running-left div.jelly { width: 76px; margin: 0 -4px 0 -8px; background-position: -76px -128px; } div.mascot-layer div.mascot-sprite.crouching div.jelly, div.mascot-layer div.mascot-sprite.right.crouching div.jelly { width: 64px; background-position: -232px 0; } div.mascot-layer div.mascot-sprite.left.crouching div.jelly { width: 64px; background-position: -236px -128px; } div.mascot-layer div.mascot-sprite.looking div.jelly, div.mascot-layer div.mascot-sprite.right.looking div.jelly { width: 64px; background-position: -308px 0; } div.mascot-layer div.mascot-sprite.left.looking div.jelly { width: 64px; background-position: -312px -128px; } div.mascot-layer div.mascot-sprite.jumping div.jelly, div.mascot-layer div.mascot-sprite.right.jumping div.jelly { width: 76px; margin: 0 -8px 0 -4px; background-position: -152px 0; } div.mascot-layer div.mascot-sprite.left.jumping div.jelly { width: 76px; margin: 0 -4px 0 -8px; background-position: -152px -128px; } div.mascot-layer div.mascot-sprite.falling div.jelly, div.mascot-layer div.mascot-sprite.right.falling div.jelly { width: 76px; margin: 0 -4px 0 -8px; background-position: -380px 0; } div.mascot-layer div.mascot-sprite.left.falling div.jelly { width: 76px; margin: 0 -4px 0 -8px; background-position: -380px -128px; } div.panel { background-color: rgba( 255, 255, 255, 0.8 ); margin: 10px 0; }