@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

#game {
    width: 343px;
    height: 480px;
    margin: 50px auto;
    background: url('img/bg.jpg');
    overflow: hidden;
    position: relative;
}

#gameStart {
    height: 100%;
    position: relative;
    /*display: none;*/
}

#headTitle {
    width: 276px;
    line-height: 86px;
    height: 77px;
    position: absolute;
    left: 52px;
    top: 100px;
    background: url('img/head.jpg') no-repeat;
    animation: ud 0.2s linear infinite alternate;
    -o-animation: ud 0.2s linear infinite alternate;
    -moz-animation: ud 0.2s linear infinite alternate;
    -webkit-animation: ud 0.2s linear infinite alternate;
}

@keyframes ud {
    from{top: 100px;}
    to{top: 97px;}
}

@-o-keyframes ud {
    from{top: 100px;}
    to{top: 97px;}
}

@-moz-keyframes ud {
    from{top: 100px;}
    to{top: 97px;}
}

@-webkit-keyframes ud {
    from{top: 100px;}
    to{top: 97px;}
}

#line {
    width: 200%;
    height: 14px;
    background: url('img/banner.jpg');
    position: absolute;
    left: 0;
    bottom: 42px;
    animation: lineMove 5s linear infinite normal;
    -o-animation: lineMove 5s linear infinite normal;
    -moz-animation: lineMove 5s linear infinite normal;
    -webkit-animation: lineMove 5s linear infinite normal;
}

@keyframes lineMove {
    from{left: 0;}
    to{left: -343px;}
}

@-o-keyframes lineMove {
    from{left: 0;}
    to{left: -343px;}
}

@-moz-keyframes lineMove {
    from{left: 0;}
    to{left: -343px;}
}

@-webkit-keyframes lineMove {
    from{left: 0;}
    to{left: -343px;}
}

#headTitle img {
    margin: 0 0 0 200px;
}

#btn {
    cursor: pointer;
    width: 85px;
    height: 29px;
    position: absolute;
    left: 126px;
    top: 250px;
    background: url('img/start.jpg') no-repeat;
}

#gameEnter {
    height: 100%;
    position: relative;
    cursor: pointer;
    display: none;
}

#myBird {
    width: 40px;
    height: 26px;
    position: absolute;
    left: 60px;
    top: 160px;
    z-index: 999;
}

#pipes {
	width: 100%;
	height: 100%;
	position: absolute;
    z-index: 99;
	left: 0;
	top: 0;
}

#pipes .p {
	width: 62px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 343px;
}

#pipes .p .upper {
	/*height: 96px;*/
}

#pipes .p .upper .up_mod {
    /*height: 36px;*/
    background: url("img/up_mod.png");
}

#pipes .p .upper .up_pipe {
	height: 60px;
	background: url("img/up_pipe.png");
}

#pipes .p .lower {
    /*height: calc(480px - 96px - 100px - 42px - 14px);*/
    margin: 100px 0 0 0;
}

#pipes .p .lower .low_mod {
    /*height: calc(480px - 96px - 100px - 42px - 14px - 60px);*/
    background: url("img/down_mod.png");
}

#pipes .p .lower .low_pipe {
    height: 60px;
    background: url("img/down_pipe.png");
}

#scores {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: absolute;
    z-index: 999;
    font-family: "Consolas", Arial, Helvetica, sans-serif;
    font-size: 42px;
    font-weight: bolder;
    color: #fff;
    text-align: center;
}