@import "../webfont/stylesheet.css";
@import "./animate.css";

*{ box-sizing: border-box; margin: 0; padding: 0 }
body { color: #888; font-family: tahoma; font-size:13px; background-color: #3d1607; overflow: hidden; background-image: url(../assets/tile.png); background-size: 256px 256px; }
ul{ list-style-type: none;}
#page{ position: absolute; left: 0; top: 0; width: 100%; bottom: 52px; }
.intro{ position: absolute; left: 10px; top: 10px; line-height: 1.4em; }
a{ color: inherit; }
#overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; bottom: 0; z-index: 10; pointer-events: none;}
#container{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; bottom: 0; transition: opacity 250ms ease-out;}
#container.hidden{ opacity: 0;}
b{ color: #aaa;}
#decal{ position: absolute; left: 50%; top: 50%; margin-left: -64px; margin-top: -64px; transform: translate3d( 0, 0, 0 ); width: 128px; height: 128px; pointer-events: auto; opacity: .5; transition: opacity 150ms ease-out; opacity: 1; cursor: pointer;}
#decal:hover, #decal.active{ opacity: 1;}
#decal:hover #control-container, #decal.active #control-container{ animation: auto;}
#decal:hover .handler, #decal.active .handler{ opacity: 1;}
#decal.hidden{ opacity: 0; pointer-events: none;}
#control-container{ position: absolute; left: 0;top:0; right: 0; bottom: 0; background-image:url(../assets/toolbox_container.svg);background-size: contain; background-repeat: no-repeat; pointer-events: none; animation: flickerAnimation 1s infinite; }
@keyframes flickerAnimation {
0%   { opacity:1; }
50%  { opacityty:0; }
100% { opacity:1; }
}
#control-image{ position: absolute; left: 0;top:0; right: 0; bottom: 0;  pointer-events: none; opacity: .5; background-position: 50% 50%; background-image: url(../assets/assets.png); background-size: cover; }
.handler{ position: absolute; width: 32px; height: 32px; background-image: url(../assets/toolbox__transform_button.svg); background-size: contain; background-repeat:no-repeat; opacity: .5;}
.handler span{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: contain; display: block; pointer-events: none; background-repeat:no-repeat; opacity: .5; }
.handler:hover span{ opacity: 1;}
#handle{ left: 50%; margin-left: -16px; top: -16px; cursor: grab; cursor: -webkit-grab; cursor:-moz-grab; }
#handle span{ background-image: url(../assets/toolbox__transform.svg); }
#handle.active{ cursor: grabbing; cursor: -webkit-grabbing; cursor:-moz-grabbing; }
#flip{ position: absolute; left: 50%; margin-left: -36px; bottom: -16px; cursor:pointer;}
#flip span{ background-image: url(../assets/toolbox_flip.svg); }
#symmetry{ position: absolute; right: 50%; margin-right: -36px; bottom: -16px; cursor:pointer; }
#symmetry span{ background-image: url(../assets/toolbox_symmetry.svg); }
#left-arrow{ position: absolute; left: 0; margin-left: -16px; top: 50%; margin-top: -16px; cursor:pointer; }
#left-arrow span{ background-image: url(../assets/toolbox_left.svg); }
#right-arrow{ position: absolute; right: 0; margin-right: -16px; top: 50%; margin-top: -16px; cursor:pointer; }
#right-arrow span{ background-image: url(../assets/toolbox_right.svg); }
#footer{ position: absolute; left: 0; bottom: 0; right: 0; height: 52px; border-top: 4px solid #f7931e; background-color: #ece3d5;}
#footer .footer-copy{ position: absolute; left: 0; right: 50%; top: 0; bottom: 0; text-align: right; line-height: 0;}
#footer .footer-copy div{ position: absolute; right: 0; bottom: 0; width: 29px; height: 39px; background-image: url(../assets/footer-skull.png); background-size: contain; background-repeat: no-repeat;}
#footer .footer-copy h2{ font-family: angryhogitc_ttregular; font-size: 18px; color: #3b2314; margin-top: 17px; margin-right: 40px;}
#footer .footer-copy p{ color: #535353; font-size: 12px; margin-top: 17px; margin-right: 40px;}
#footer .social{ position: absolute; left: 50%; top: 15px; margin-left: 10px; line-height: 10px;}
#toolbar{ position: absolute; left: 50%; bottom: 43px; margin-left: -150px; width: 300px; height: 137px; background-image: url(../assets/toolbar.png); background-size: contain; background-repeat: no-repeat; transform: translate3d( 0, 200%, 0);}
#toolbar.visible{ transform: translate3d( 0, 0, 0); }
#tools{ font-family: angryhogitc_ttregular; font-size: 16px; color: white; position: absolute; left: 18px; top: 20px; width: 264px; height: 58px; }
#tools li{ width: 25%; float: left; text-align: center; cursor: pointer; height: 100%; position: relative;}
#tools li span{ width: 100%; height: 40px; display: block; background-repeat: no-repeat; background-size: contain; left: 50%; top: 20px; transform: translate3d(-50%,-50%,0); position: absolute; transition: top 150ms ease-out;}
#tools li p{ position: absolute; left: 0; bottom: 0; right: 0; color: #f1f3f3; text-shadow: 0 2px 0 #1c0c06;}
#tools li.new span{ background-image: url(../assets/new.svg); width: 28px; top: 25px;}
#tools li.art span{ background-image: url(../assets/art.svg); width: 38px; margin-bottom: 4px;}
#tools li.snap span{ background-image: url(../assets/snap.svg); width: 32px; top: 25px;}
#tools li.share span{ background-image: url(../assets/share.svg); width: 28px; top: 28px; }
#tools li:hover span{ top: 15px;}
#splash{ font-family: angryhogitc_ttregular; color: #f3efeb; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
#splash .vertical-bar{ width: 490px; top: 0; bottom: 0; left: 50%; margin-left: -245px; background-color: #220c03; position: absolute; }
#splash .stitches{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image:url(../assets/stitches.png);background-repeat:repeat-y;}
#splash .title{ position: absolute; left: 50%; bottom: 50%; width: 775px; height: 50%; margin-left: -400px; background-image:url(../assets/title.png);background-repeat:no-repeat;background-size:contain;background-position: 50% 100%;}
#splash .skull{ position: absolute; left: 50%; width: 100px; height: 100px; margin-left: -50px; top: 50%; margin-top: 200px; background-image: url(../assets/splash-skull.jpg); background-size: contain;}
#splash .bkg-title{ position: absolute; left: 0; top: 50%; width: 490px; height: 583px; background-image:url(../assets/title-bkg.jpg);background-repeat:no-repeat;background-size:contain;background-position: 50% 100%; margin-top: -400px ;}
#splash h2{ text-transform: uppercase; position: absolute; left: 0; right: 0; text-align: center; top: 50%; margin-top: 50px;}
#splash p{ position: absolute; left: 0; right: 0; text-align: center; top: 50%; margin-top: 120px; font-size: 22px; line-height: 30px;}
#splash .progress{ position: absolute; left: 40px; right: 40px; top: 50%; margin-top: 80px; height: 30px; background-image: url(../assets/loading_frame.svg); background-repeat: no-repeat; background-size: contain;} 
#splash .progress-bar{ position: absolute; left: 4px; top: 4px; bottom: 0; height: 18px; margin-right: 4px; background-image: url(../assets/loading.svg); background-repeat: repeat-x; background-size: contain;}
#assets{ position: absolute; left: 50%; bottom: 170px; width: 552px; height: 450px; transform: translate3d( -50%, 0, 0); background-image: url(../assets/art_window.svg); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; transition: transform 350ms ease-out, opacity 150ms ease-out; }
#assets ul.motifs{ position: absolute; left: 50%; top: 130px; width: 432px; margin-left: -216px; height:216px; }
#assets ul.motifs li{ margin: 2px; width: 50px; height: 50px; float: left; border: 1px solid #8a5e3b; background-image: url(../assets/assets.png); background-repeat: no-repeat; background-size: 800% 400%; cursor: pointer;}
#assets li:hover{ background-color: #faa225; }
#assets h2{ font-family: angryhogitc_ttregular; color: #5f3913; text-align: center; font-size: 26px; position: absolute; left: 105px; top: 75px; right: 105px; height: 50px; }
#assets h1{ font-family: angryhogitc_ttregular; color: #f3efeb; text-align: center; font-size: 34px; position: absolute; left: 235px; top: 16px; right: 235px; height: 50px; text-shadow: 0 2px 0 #603913; letter-spacing: 3px; }
#assets .skulls{ position: absolute; left: 60px; bottom: 52px; right: 60px; height: 50px; }
#assets .skulls li{ width: 50px; height: 50px; float: left; border: 1px solid green; margin: 0 2px; position: relative; cursor: pointer;}
#assets .skulls li span{ position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; background-size: contain; background-position: 50% 50%;}
#curtain{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba( 0, 0, 0, .5 ); transition: opacity 150ms ease-out;}
#curtain.hidden{ opacity: 0; pointer-events: none;}
#assets.hidden{ opacity: 0; pointer-events: none; transform: translate3d( -50%, 50px, 0); }
#polaroid{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: translate3d( 0, -200%, 0); pointer-events: none;}
#polaroid.visible{ transform: translate3d(0,0,0); }
#polaroid .overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .5; }
#polaroid .overlay-panel{ position: absolute; background-color: black; pointer-events: auto; }
#polaroid .left{ left: 0; top: 0; bottom: 0;}
#polaroid .top{ top: 0; left: 0; right: 0;}
#polaroid .right{ right: 0;top: 0; bottom: 0;}
#polaroid .bottom{ bottom: 0;left: 0; right: 0;}
#snap-picture{ position: absolute; left: 50%; bottom: 15px; width: 95px; height: 95px; background-image: url(../assets/toolbox__transform_button.svg); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transform: translate3d( -50%, 0, 0 ); cursor:pointer; pointer-events: auto;}
#snap-picture span{ position: absolute; left: 20px; top: 15px; bottom: 20px; right: 20px; background-image: url(../assets/camera_icon.svg); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transition: transform 150ms ease-out;}
#snap-picture:hover span{ will-change: transform; transform: translate3d( 0,0,0 ) rotate(-10deg) scale(1.4, 1.4); }
#snap-frame{ position: absolute; left: 50%; top: 50%; transform: translate3d( -50%, -50%, 0); background-image: url(../assets/pola_frame.svg); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; -webkit-filter: drop-shadow( 0 20px 20px rgba(0,0,0,.75) ); }
#snap-viewport{ position: absolute; left: 8%; top: 8%; right: 8%; bottom: 18%; opacity: 0; background-color: #f2f2f2; transition: opacity 500ms ease-out;}
#snap-viewport.flash{ opacity: 1; transition: opacity 50ms ease-out;}
#dialog-new{ position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; transition: opacity 250ms ease-out;}
#dialog-new .image{ position: absolute; width: 128px; height: 128px; top: 0; left: 50%; margin-left: -64px; background-image: url(../assets/new-skull.png); background-size: contain;}
#dialog-new h2{ font-family: angryhogitc_ttregular; color: #f3efeb; position: absolute; left: 0; right: 0; text-align: center; top: 130px; }
#dialog-new p{ font-family: angryhogitc_ttregular; color: #f3efeb; font-size: 18px; position: absolute; left: 0; right: 0; text-align: center; top: 170px; }
#dialog-new p span{ padding: 0 20px; cursor: pointer;}
#dialog-new span.yes:hover{ color: #f3aa3e;}
#dialog-new span.no:hover{ color: #5ae9c9;}
#dialog-new.hidden{ opacity: 0; pointer-events: none;}
#share{ position: absolute; left: 50%; top: 50%; width: 390px; height: 265px; transform: translate3d( -50%, -50%, 0); background-image: url(../assets/share-panel.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; transition: transform 350ms ease-out, opacity 150ms ease-out; }
#share.hidden{ opacity: 0; pointer-events: none; transform: translate3d( -50%, 50px, 0); }
#share h1{ font-family: angryhogitc_ttregular; color: #f3efeb; text-align: center; font-size: 34px; position: absolute; left: 0; top: 16px; right: 0; height: 50px; text-shadow: 0 2px 0 #603913; letter-spacing: 3px; }
#share h2{ font-family: angryhogitc_ttregular; color: #5f3913; text-align: center; font-size: 23px; position: absolute; left: 0; top: 70px; right: 0; height: 50px; }
#share .status{ position: absolute; left: 50px; right: 50px; top: 105px; text-align: center; padding: 5px; background-image: url(../assets/url-input.png); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; height: 44px; font-family: angryhogitc_ttregular; color: #ffffff; font-size: 18px; line-height: 35px; cursor:pointer;}
#copyCB{ opacity: 0; pointer-events: none;}
#share .status{ overflow: hidden;}
#share-buttons{ position: absolute; left: 50px; right: 50px; top: 160px;  }
#share .button{ width: 140px; float: left; text-align: center; margin: 2px;  background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; height: 50px; font-family: angryhogitc_ttregular; color: #ffffff; font-size: 18px; line-height: 48px; }
#share .disabled{ pointer-events: none; opacity: .5;}
#share .twitter{ background-image: url(../assets/share-twitter.png); }
#share .fb{ background-image: url(../assets/share-fb.png);}
#credits{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; color: #f1f3f3; pointer-events: none;}
#credits.hidden{ display: none;}
#credits h1{ font-family: angryhogitc_ttregular; color: #f3efeb; margin-bottom: .5em; margin-top: 1em; }
#credits p{ margin-bottom: 1em ;}
#credits li{ margin-bottom: .5em;}
#credits .panel{ position: absolute; left: 50%; top: 50%; margin-top: -227px; margin-left: -280px; width: 560px; height: 453px; sbackground-image: url(../assets/credits_help_container.svg); }
#credits .scroller{ position: absolute; left: 50px; top: 100px; bottom: 55px; right: 50px; overflow: scroll; pointer-events: auto; }
#credits b{ color: #FBA326;}
#credits img.icon{ height: 1em; transform: scale(2,2) translate3d(0,1px,0); }
#help{ pointer-events: none; position: absolute; left: 50%; top: 50%; width: 600px; height: 300px; transform: translate3d( -50%, -50%, 0 ); background-image: url(../assets/tooltip.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; transition: opacity 250ms ease-out;}
#help.hidden{ opacity: 0; }