/*
   Copyright 2015 WebSyn.com.br
   touchfish - 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.
*/

@-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 animoceano {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-moz-keyframes animoceano {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-o-keyframes animoceano {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@keyframes animoceano {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}

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

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

@-webkit-keyframes animteto {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-moz-keyframes animteto {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-o-keyframes animteto {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@keyframes animteto {
   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%;
}

#oceano
{
   position: absolute;
   top: 0;
   width: 100%;
   height: 80%;
   background-image: url('../asset/oceano.png');
   background-repeat: repeat-x;
   background-position: 0pxa 100%;
   background-color: #013a7c;
   
   -webkit-animation: animoceano 7s linear infinite;
   animation: animoceano 7s linear infinite;
}

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

#teto
{
   position: absolute;
   top: -111px;
   height: 121px;
   width: 100%;
   background-image: url('../asset/teto.png');
   background-repeat: repeat-x;
   
   -webkit-animation: animLand 2516ms linear infinite;
   animation: animLand 2516ms linear infinite;
}

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

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

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

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

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

#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;
}

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

.peixe
{
   position: absolute;
   width: 34px;
   height: 24px;
   background-image: url('../asset/peixe.png');
   
   -webkit-animation: animpeixe 300ms steps(4) infinite;
   animation: animpeixe 300ms steps(4) infinite;
}

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

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

.madeira_upper:after
{
   content: "";
   position: absolute;
   bottom: 0;
   width: 52px;
   height: 26px;
   background-image: url('../asset/madeira-baixo.png');
}

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

.madeira_lower:after
{
   content: "";
   position: absolute;
   top: 0;
   width: 52px;
   height: 26px;
   background-image: url('../asset/madeira-cima.png');
}

#footer
{
   position: absolute;
   bottom: 3px;
   left: 3px;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active
{
   display: block;
   padding: 2px;
   text-decoration: none;
   color: #fff;
}
button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}