/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 16, 2012 04:05:35 AM America/New_York */

@font-face {
    font-family: 'Pictos';
    src: url('fonts/pictos-web.eot');
    src: local('☺'), url('fonts/pictos-web.woff') format('woff'), url('fonts/pictos-web.ttf') format('truetype'), url('fonts/pictos-web.svg#webfontIyfZbseF') format('svg');
    font-weight: normal;
    font-style: normal;
}



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

}

/* font-face */
@font-face {
    font-family: "GeneralFoundicons";
    src: url("fonts/general_foundicons.eot");
    src: url("fonts/general_foundicons.eot?#iefix") format("embedded-opentype"), url("fonts/general_foundicons.woff") format("woff"), url("fonts/general_foundicons.ttf") format("truetype"), url("fonts/general_foundicons.svg#GeneralFoundicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    background: url('../images/dark.png');
    background-repeat: repeat-x repeat-y;
    color: white;
    text-shadow: -1px 1px 2px black;
    font-family: "CommandoCommando";
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

div {
    -webkit-user-select: none;
    user-select: none;
}

#box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    display: none;
    background: url('../images/BG.png');
    background-size: cover;
}

#main-menu-canvas {
    position: absolute;
    top: 0;
    left: 60;
    height: 100%;
}

.smallBg {
    /*     background: url(../images/backgroundshort.png); */
}

.tallBg {
    /*     background: url(../images/background.png); */
}

.center {
    text-align: center;
}

.fill {
    width: 100%;
}

.middle {
    margin: 0 auto;
}

.glow {
    box-shadow: 0px 0px 20px #aaaaaa;
}

.left {
    float: left;
}

.text-left {
    text-align: left;
}

.right {
    float: left;
    text-align: right;
    margin-right: 10px;

}

.underline {
    background: -webkit-gradient(linear, left bottom, right bottom, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 0.0)), color-stop(0.5, rgba(0, 0, 0, 1.0)));
    width: 100%;
    height: 3px;
    margin: 0px auto 10px;
}

.middle-line {
    float: left;
    padding: 9 0;
}

.share {
    float: left;
}

.wid {
    width: 100px;
}

.life {
    background-image: url('../images/lifeheart.png');
    background-repeat: no-repeat;
    float: right;
    width: 25px;
    height: 25px;
    padding: 0 2 0 4;
    margin-top: 25px;
}

/*
.best_score {
    margin-top: 50px;
}
*/

#hud {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 407px;
    z-index: 50050;
}

#health-meter-blue {
    background-image: -webkit-linear-gradient(right, rgb(2, 63, 184) 25%, rgb(10, 255, 255) 63%);
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50052;
}

/*     background-image: -webkit-linear-gradient(left , rgb(247,255,0) 0%, rgb(199,0,0) 56%, rgb(255,0,0) 85%); */

#instructions {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 20px;
    font-size: 90%;
}

#instructions-center {
    width: 300px;
    margin: 0 auto;
}

#health-meter {
    background-image: -webkit-linear-gradient(left, rgb(247, 255, 0) 0%, rgb(199, 0, 0) 56%, rgb(255, 0, 0) 85%);
    float: left;
    margin-left: 75px;
    height: 20px;
    z-index: 50051;
}

#health-image {
    background-image: url('../images/healthbar.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 106px;
    width: 407px;
    z-index: 50060;
}

#sharables {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0 10 10;
    width: 120px;
}

#box {
    z-index: 50000;
}

#replay-holder {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 40px;
}

#replay {
    width: 180px;
    height: 30px;
    padding: 10 3 0 9;
    margin: 0 auto;
}



#welcome {
    font-size: 20px;
}

#title {
    font-size: 40px;
    padding: 30 0;
    width: 100%;
    text-align: center;
}

#hints {
    display: none;
}

#main_menu {
    padding: 40 0;
}

#all_messages {
    text-align: center;
    margin: 0 auto;
    width: 460px;
}

#end_level_messages {
    width: 100%;
    margin: 0;
    text-align: center;
}


.share-icon {
    max-width: 60px;
    height: auto;
    margin: 0 5;
}

.level_messages {
    margin: 2px 8px 2px 2px;
    width: 60px;
    height: 20px;
}

.level_messages div {
    font-size: 18px;
}

.header_message {
    margin-bottom: 20px;
    font-size: 30px;
}

.Pictos {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'Pictos', sans-serif;
}

.cape_button {
    width: 100px;
    font-family: "CommandoCommando";
    font-size: 25px;
    color: #1f0c1f;
    padding: 10px 29px;
    background: -moz-linear-gradient(top,
            #fff3db 0%,
            #ffc821 23%,
            #ff6600);
    background: -webkit-gradient(linear, left top, left bottom,
            from(#fff3db),
            color-stop(0.23, #ffc821),
            to(#ff6600));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #b85f00;
    -moz-box-shadow:
        0px 1px 12px rgba(000, 000, 000, 0.5),
        inset 0px -1px 2px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow:
        0px 1px 12px rgba(000, 000, 000, 0.5),
        inset 0px -1px 2px rgba(255, 255, 255, 0.6);
    box-shadow:
        0px 1px 12px rgba(000, 000, 000, 0.5),
        inset 0px -1px 2px rgba(255, 255, 255, 0.6);
    text-shadow:
        0px -1px 1px rgba(000, 000, 000, 0.1),
        0px 1px 0px rgba(255, 255, 255, 0.3);

}

#start_button {
    z-index: 99000;
}

#highScore {
    margin: 20 0 0 0;
    position: absolute;
    bottom: 65px;
    width: 100%;
    font-size: 25px;
}

#bestLevel {
    margin: 20 0 0 0;
    position: absolute;
    bottom: 40px;
    width: 100%;
}

#controls div {
    float: left;
    width: 30px;
    height: 20px;
    position: absolute;
    bottom: 40px;
    border: 0px;
    padding: 30px;
    border-radius: 50px;
    font-size: 120%;
    z-index: 999999;
}

#fly {
    left: 40px;
    background: black;
}

#fire {
    right: 40px;
    background: black;
}

.assetStore {
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffe9bd), color-stop(1, #96a82d));
    background-color: #ffe9bd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #dbdbdb;
    display: inline-block;
    color: #777777;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #ffffff;
}

.assetIcon {
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 3px;
    margin: 5px 30px 0px 10px;
    width: auto;
    height: 25px;
    vertical-align: middle;
    float: left;
}

.assetTitle {
    margin: 15px 0px 0px 0px;
    vertical-align: middle;
    text-align: left;
    float: left;
}

.assetButton {
    z-index: 1001;
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
    width: 40px;
    height: 10px;
    float: right;
    margin: 10px 20px 0px 0px;
    text-align: center;
}

.pane {
    margin: 0 auto;
    width: 60%;
    border: 4px ridge #595959;
    background: rgba(0, 0, 0, 1);
    position: absolute;
    top: 20%;
    left: 20%;
    overflow: hidden;
}

.wider {
    width: 80%;
    left: 10%;
}

.shorter {
    width: 50%;
    left: 25%;

}

.pane div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.paneheader {
    background-image: -webkit-linear-gradient(bottom, rgb(61, 61, 61) 23%, rgb(46, 46, 46) 62%, rgb(107, 107, 107) 81%);
    height: 30px;
    text-align: center;
}

.paneHeaderTitle {
    text-align: center;
    margin: 0 auto;
    padding: 10px 0px 0px 0px;
    width: 40%;
}

.paneheadercoins {
    float: left;
    margin: 5px 5px 0px 5px;
    min-width: 80px;
}

.coinsImage {
    float: left;
    padding: 3px;
    margin: 0px 5px;
}

.headerCoinsValue {
    float: left;
    padding: 3px;
    margin: 2px 0px 0px 0px;
}

.paneHeaderClose {
    position: absolute;
    top: 0;
    right: 0;
    border: 2px ridge black;
    background: #181818;
    padding: 1px 5px;
    margin: 3px 10px;
}

.panerow {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid rgba(56, 56, 56, 0.81);
}

/* Animations */

.paneslide {
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: slideintop;
}

.paneslideout {
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: slideoutbottom;
}

@-webkit-keyframes slideintop {
    from {
        -webkit-transform: translateY(-200%);
    }

    /*
 
  80% {
    -webkit-transform: translateY(0); 
  }
  83% {
    -webkit-transform: translateY(-4%); 
  }
  87% {
    -webkit-transform: translateY(-6%); 
  }
  90% {
    -webkit-transform: translateY(-7%); 
  }  
  93% {
    -webkit-transform: translateY(-6%); 
  }  
  97% {
    -webkit-transform: translateY(-4%); 
  }  
*/
    to {
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes slideoutbottom {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(300%);
    }
}

.panerowslide {
    -webkit-animation-duration: 0.2s;
    -webkit-animation-name: slideinleft;
}

@-webkit-keyframes slideinleft {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(0);
    }
}