/*
    Copyright 2014 Nebez Briefkani
    floppybird - main.css
    
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

@font-face {
    font-family: Bitmap;
    src: url("../assets/flappy.ttf");
}

@-webkit-keyframes animLand {
    0% { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}
@-moz-keyframes animLand {
    0% { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}
@-o-keyframes animLand {
    0% { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}
@keyframes animLand {
    0% { background-position: 0px 0px; }
    100% { background-position: -335px 0px; }
}

@-webkit-keyframes animSky {
    0% { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}
@-moz-keyframes animSky {
    0% { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}
@-o-keyframes animSky {
    0% { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}
@keyframes animSky {
    0% { background-position: 0px 100%; }
    100% { background-position: -275px 100%; }
}

@-webkit-keyframes animBird {
    from { background-position: 0px 0px; }
    to { background-position: 0px -156px; }
}
@-moz-keyframes animBird {
    from { background-position: 0px 0px; }
    to { background-position: 0px -156px; }
}
@-o-keyframes animBird {
    from { background-position: 0px 0px; }
    to { background-position: 0px -156px; }
}
@keyframes animBird {
    from { background-position: 0px 0px; }
    to { background-position: 0px -156px; }
}

@-webkit-keyframes animPipe {
    0% { left: 900px; }
    100% { left: -100px; }
}
@-moz-keyframes animPipe {
    0% { left: 900px; }
    100% { left: -100px; }
}
@-o-keyframes animPipe {
    0% { left: 900px; }
    100% { left: -100px; }
}
@keyframes animPipe {
    0% { left: 900px; }
    100% { left: -100px; }
}

@-webkit-keyframes animCeiling {
    0% { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}
@-moz-keyframes animCeiling {
    0% { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}
@-o-keyframes animCeiling {
    0% { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}
@keyframes animCeiling {
    0% { background-position: 0px 0px; }
    100% { background-position: -63px 0px; }
}


*,
*:before,
*:after
{
    /* border box */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* gpu acceleration */
    -webkit-transition: translate3d(0,0,0);
    /* select disable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body
{
    height: 100%;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    color: #fff;
}

#gamecontainer
{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 525px;
}

/*
Screen - Game
*/
#gamescreen
{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0% 75%;
    transform: scale(2.0, 2.0);
}

#sky
{
    position: absolute;
    top: 1px;
    width: 100%;
    height: 80%;
    background-image: url('../assets/sky2.png');
    background-repeat: repeat-x;
    background-position: 0px 100%;
    background-color: #4ec0ca;
    
    -webkit-animation: animSky 7s linear infinite;
    animation: animSky 7s linear infinite;
}

#flyarea
{
    position: absolute;
    bottom: 0;
    height: 420px;
    width: 100%;
}

#ceiling
{
    position: absolute;
    top: -16px;
    height: 16px;
    width: 100%;
    background-image: url('../assets/ceiling.png');
    background-repeat: repeat-x;
    
    -webkit-animation: animCeiling 481ms linear infinite;
    animation: animCeiling 481ms linear infinite;
}

#land
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background-image: url('../assets/land.png');
    background-repeat: repeat-x;
    background-position: 0px 0px;
    background-color: #ded895;
    
    -webkit-animation: animLand 2516ms linear infinite;
    animation: animLand 2516ms linear infinite;
}

#bigscore
{
    position: absolute;
    top: 20px;
    left: 150px;
    z-index: 100;
}

#bigscore img
{
    display: inline-block;
    padding: 1px;
}

#splash
{
    position: absolute;
    opacity: 0;
    top: 75px;
    left: 90px;
    width: 188px;
    height: 170px;
    background-image: url('../assets/splash.png');
    background-repeat: no-repeat;
}

#scoreboard
{
    position: absolute;
    display: none;
    opacity: 0;
    top: 64px;
    left: 43px;
    width: 236px;
    height: 280px;
    background-image: url('../assets/scoreboard.png');
    background-repeat: no-repeat;
    
    z-index: 1000;
}

#leaderboard
{
    position: absolute;
    display: none;
    opacity: 0;
    top: 64px;
    left: 299px;
    width: 236px;
    height: 280px;
    background-image: url('../assets/leaderboard.png');
    background-repeat: no-repeat;
    z-index: 1000;
    font-family: Bitmap, monospace;
    padding: 25px;
    text-transform: uppercase;
}

#leaderboard-title
{
    font-size: 16pt;
    color: white;
    text-shadow: -1px -1px 0 #000,
                 3px -1px 0 #000,
                 -1px 3px 0 #000,
                 3px 3px 0 #000;
}

#leaderboard-list
{
    font-size: 12pt;
    color: white;
    text-shadow: -1px -1px 0 #000,
                 1px -1px 0 #000,
                 -1px 1px 0 #000,
                 1px 1px 0 #000;
    margin: 5px;
    height: 100%;
    display: table-row;
    overflow: hidden;
}

#leaderboard-list tr
{
    border-bottom: 1px solid black;
}

#leaderboard-list th
{
    text-align: right;
    padding-top: 3px;
    padding-bottom: 3px;
}

#leaderboard-list td
{
    font-size: 10pt;
    text-align: right;
    padding-top: 3px;
    padding-bottom: 3px;
}

#leaderboard-list table
{
    width: 100%;
}

#leaderboard-submit
{
    bottom: 0;
    display: table-row;
}

#leaderboard-submit-name
{
    width: auto;
    font-family: inherit;
    font-size: 1em;
    text-transform: inherit;
}

#leaderboard-submit-button
{
    width: auto;
    font-family: inherit;
    font-size: 1em;
    text-transform: inherit;
}

#medal
{
    position: absolute;
    opacity: 0;
    top: 114px;
    left: 32px;
    width: 44px;
    height: 44px;
}

#currentscore
{
    position: absolute;
    top: 105px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
}

#currentscore img
{
    padding-left: 2px;
}

#highscore
{
    position: absolute;
    top: 147px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
}

#highscore img
{
    padding-left: 2px;
}

#replay
{
    position: absolute;
    opacity: 0;
    top: 205px;
    left: 61px;
    height: 115px;
    width: 70px;
    cursor: pointer;
}

.boundingbox
{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1px solid red;
}

#player
{
    left: 60px;
    top: 200px;
}

#tooltip
{
    position: absolute;
    padding: 3px;
    background: red;
    /*
    width: auto;
    height: auto;
    */
    font-family: sans-serif;
    border: 1px solid black;
    text-transform: none;
}

.bird
{
    position: absolute;
    width: 34px;
    height: 39px;
    background-image: url('../assets/waynebird2.png');
    
    -webkit-animation: animBird 300ms steps(4) infinite;
    animation: animBird 300ms steps(4) infinite;
}

.pipe
{
    position: absolute;
    left: -100px;
    width: 52px;
    height: 100%;
    z-index: 10;
    
    -webkit-animation: animPipe 7500ms linear;
    animation: animPipe 7500ms linear;
}

.pipe_upper
{
    position: absolute;
    top: 0;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_upper:after
{
    content: "";
    position: absolute;
    bottom: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-down.png');
}

.pipe_lower
{
    position: absolute;
    bottom: 0;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_lower:after
{
    content: "";
    position: absolute;
    top: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-up.png');
}

.coin
{
    content: "";
    position: absolute;
    background-position: center;
}

.tofu
{
    width: 32px;
    height: 32px;
    background-image: url('../assets/tofu-small.png');
}

.corn
{
    width: 24px;
    height: 32px;
    background-image: url('../assets/corn-small.png');
}

.carrot
{
    width: 16px;
    height: 32px;
    background-image: url('../assets/carrot-small.png');
}

.peas
{
    width: 32px;
    height: 27px;
    background-image: url('../assets/peas-small.png');
}

.apple
{
    width: 30px;
    height: 32px;
    background-image: url('../assets/apple-small.png');
}

.mushroom
{
    width: 32px;
    height: 29px;
    background-image: url('../assets/mushroom-small.png');
}

.broccoli
{
    width: 31px;
    height: 32px;
    background-image: url('../assets/broccoli-small.png');
}

.potato
{
    width: 32px;
    height: 23px;
    background-image: url('../assets/potato-small.png');
}

#footer
{
    position: absolute;
    bottom: 3px;
    left: 3px;
    color: black;
    font-size: 20pt;
    font-family: Bitmap, monospace;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active
{
    display: block;
    padding: 2px;
    text-decoration: none;
    color: #fff;
}