/*
 * ipad.css
 * Part of 123Abc
 * Copyright (c) 2010 Paul Panserrieu (http://42loops.com)
 */

body {
    background:#000 url(../assets/pics/startup-screen.png) no-repeat right top;
    margin:0;
}

@-webkit-keyframes fade-animation {
    from {
        background-color: rgb(28, 89, 49);
        opacity: 0;
    }
    to {
        background-color: rgb(28, 89, 49);
        opacity: 1.0;
    }
}

.fade-main-container {
     -webkit-animation-name: fade-animation;
     -webkit-animation-duration: 1s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-timing-function: ease-in;
     background: -webkit-gradient(radial, 118 118, 1200, 441 147, 88, from(#FCFCFC), to(rgb(28, 89, 49)), color-stop(0,#1F1212));
}

#main-container {
    width:1024px;
    height:768px;
}

.abc-box {
    position:absolute;
    -webkit-border-radius: 10px;
    width:100px;
    height:100px;
    border-width:3px;
    border-style:solid;
    border-color:#aaa;
    -webkit-box-shadow: 3px 3px 5px rgba(12,12,12,0.5);
    padding: 1px 1px 2px 1px;
}

.config-button {
    background:url(../assets/pics/config-button.png) no-repeat;
    background-position:0 0;
    position:absolute;
    opacity:1;
    width:50px;
    height:49px;
    top:20px;
    left:487px;
}

.config-button:active {
    background-position:0 -49px;
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0.0;
         -webkit-animation-timing-function: ease-out;
    }
    to {
        opacity: 0.90;
    }
}

.number-goal {
    position:absolute;
    width: 20px;
    height: 766px;
    top:0px;
    left:-100px;
    background: -webkit-gradient(linear, 0% 3%, 0% 99%, from(#644934), to(#644934), color-stop(.5,#A77A57),color-stop(.8,#B40406),color-stop(.2,#b40406));
     -webkit-border-top-right-radius: 10px;
     -webkit-border-bottom-right-radius: 10px;
     -webkit-box-shadow: 3px 3px 5px rgba(12,12,12,0.5); padding: 1px 1px 2px 1px;
     z-index:100000;
}

.letter-goal {
    position:absolute;
    width: 35px;
    height: 766px;
    top:0px;
    left:1124px;
    background: -webkit-gradient(linear, 0% 3%, 0% 99%, from(#644934), to(#644934), color-stop(.5,#A77A57),color-stop(.8,#FCDD3F),color-stop(.2,#FCDD3F));
     -webkit-border-top-left-radius: 10px;
     -webkit-border-bottom-left-radius: 10px;
     -webkit-box-shadow: -3px 3px 5px rgba(12,12,12,0.5); padding: 1px 1px 2px 1px;
     z-index:100000;
}

.symbol-goal {
    position:absolute;
    width: 624px;
    height: 30px;
    top:848px;
    left:200px;
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#5F6062), to(#5F6062), color-stop(.2,#EFEEEE),color-stop(.5,#A9AAAC),color-stop(.8,#EFEEEE));
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
     -webkit-box-shadow: -3px 3px 5px rgba(12,12,12,0.5); padding: 1px 1px 2px 1px;
     z-index:100000;
}

@-webkit-keyframes mask-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.2;
    }
}

@-webkit-keyframes mask-fade-out {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 0;
    }
}

.hidden{
    display:none;
}

.mask {
    -webkit-animation-name: mask-fade-in;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:99999999;
    opacity: 0.2;
}

.mask-hidden{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    -webkit-animation-name: mask-fade-out;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    z-index:99999999;
    opacity:0.0;
}

.init-config-panel {
    background:url('../assets/pics/config-background.png');
    position:absolute;
    opacity:1;
    width:500px;
    height:500px;
    top:-540px;
    left:262px; 
    -webkit-box-shadow: -3px 3px 5px rgba(12,12,12,0.5);
    z-index:100000000;
    -webkit-border-radius: 90px;
}

.sound-button {
    background:url(../assets/pics/sound-button.png) no-repeat;
    background-position:0 0;
    float:left;
    opacity:1;
    width:100px;
    height:100px;
    margin-top:250px;
    margin-left:100px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: -3px 3px 5px rgba(12,12,12,0.5);
}

.sound-button:active {
    -webkit-box-shadow: 0px 0px 0px rgba(12,12,12,0.0);
}

.size-button {
    background:url(../assets/pics/size-button.png);
    background-position:0 0;
    float:left;
    opacity:1;
    width:100px;
    height:100px;
    margin-top:250px;
    margin-left:100px;
    -webkit-box-shadow: -3px 3px 5px rgba(12,12,12,0.5);
    -webkit-border-radius: 20px;
}

.size-button:active {
    -webkit-box-shadow: 0px 0px 0px rgba(12,12,12,0.0);
}

.calc {
    background:url(../assets/pics/calc.png);
    width:200px;
    height:376px;
    top:200px;
    left:-224px;
    position:absolute;
    -webkit-transform:rotate(10deg);
}

.book {
    background:url(../assets/pics/book.png);
    width:300px;
    height:349px;
    top:100px;
    left:1100px;
    position:absolute;
    -webkit-transform:rotate(-30deg);
}

.garbage {
    background:url(../assets/pics/poubelle.png);
    width:200px;
    height:287px;
    top:968px;
    left:500px;
    position:absolute;
    -webkit-transform:rotate(15deg);
}

.game-indicator {
    background:url(../assets/pics/progess-star-final-sprite-small.png) no-repeat;
    background-position:0 0;
    position:absolute;
    opacity:1;
    width:300px;
    height:50px;
    top:15px;
    left:75px;
}

.star {
    background:url(../assets/pics/rounded-star-50.png);
    width:50px;
    height:50px;
    position:absolute;
}

.restart-panel {
    background:url('../assets/pics/restart-button.png');
    position:absolute;
    opacity:1;
    width:300px;
    height:288px;
    top:856px;
    left:362px; 
    z-index:100000000;
    -webkit-border-radius: 250px; 
}