@font-face {

    font-family:'ft';

    src: url('../assets/fonts/ft.ttf');

}



@font-face {

    font-family:'ft30';

    src: url('../assets/fonts/ft30.ttf');

}



@font-face {

    font-family:'ft41';

    src: url('../assets/fonts/ft41.ttf');

}



#UIContainer{

    font-family: 'ft';

}



#UIContainer, #loadingContainer{

    background-image: url(../assets/images/sprites/BG1.png);

    background-size: cover;

}



#UIContainer input[type="radio"]{

    display:none;

}



#UIContainer ul{

    display: inline-block;

    list-style-type: none;

    padding: 0 1em 0 1em;

    margin: 0;

    margin-left: -0.5em;

    vertical-align: top;

}



#UIContainer label{

    font-family: Arial;

    font-size: 0.5em;

}



#UIContainer input[type="radio"] + label

{

    background-image:url(../assets/images/ui/checkBox0002.png);

    background-size: contain;

    background-position: bottom right;

    background-repeat: no-repeat;

    height: 1.1em;

    width: 100%;

    display:inline-block;

    padding: 0 1em 0 0;

    cursor: pointer;

}



#UIContainer input[type="radio"]:checked + label

{

    background-image:url(../assets/images/ui/checkBox0001.png);

    background-size: contain;

    background-position: right;

    background-repeat: no-repeat;

    height: 1.1em;

    width: 100%;

    display:inline-block;

    padding: 0 1em 0 0;

    cursor: pointer;

}



#UIContainer .startButtonContainer{

    width:100%;

    margin-top:1em;

    text-align: center;

    position: absolute;

    color:#fff;

}

#UIContainer .startButtonContainer div{

    background-image:url('../assets/images/uis/startButton.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    display: inline-block;

    cursor: pointer;    

}



#UIContainer .bannerTitle{

    color:#aad502;

    font: 1em ft;

    letter-spacing: 0.1em;

    width: 100%;

    margin-top: 1.2em;

    text-transform: capitalize;

    text-align: center;

}



#UIContainer .bannerDescription1{

    color:#aad502;

    font:0.55em ft;

    padding:0.5em 2em 1em 3em;

    line-height: 1.9em;

}



#UIContainer .sharkTitle{

    background-repeat: no-repeat;

    background-position: 80% 54%;

}



#UIContainer .medalsTitle{

    background-repeat: no-repeat;

    background-position: 80% 0%;

}



#UIContainer .gameOver{

    margin-top: 0.2em;

    background-image:url('../assets/images/uis/gameOver.png');

    background-repeat: no-repeat;

    background-size: contain;

    width: 100%;

    height: 2.1em;

}



#UIContainer .textBox{

    background-image:url('../assets/images/uis/textBG.png');

    background-repeat: no-repeat;

    background-size: contain;

    position: absolute;

    bottom:1em;

    left:5em;

    text-align: center;

    font:0.8em ft;

    color:black;

    line-height: 1.8em;

}

#UIContainer .textBox span{

    color:blue;

    text-decoration: underline;

}



#UIContainer .scoreBar{

    display: inline-block;

    margin-left: 12em;

    text-transform: capitalize;

    font-size:0.5em;

    color:#000;

    padding-top: 0.5em;

    margin-top:0px;

    vertical-align: top;

}



#UIContainer .lifeBar{

    display: inline-block;

    margin-left: 4em;

    font-size:0.5em;

    color:#fff;

    text-transform: capitalize;

    padding-top: 0.5em;

    margin-top:0px;

    vertical-align: top;

}



#UIContainer .levelBar{

    display: inline-block;

    margin-left: 4em;

    font-size:0.5em;

    color:#fff;

    text-transform: capitalize;

    padding-top: 0.5em;

    margin-top:0px;

    vertical-align: top;

}



#UIContainer .soundBar{

    display: inline-block;

    margin-left:1.5em;

    font-size:0.5em;

    color:#fff;

    text-transform: capitalize;

    margin-top: 0.5em;

    vertical-align: top;

    cursor: pointer;

}



#UIContainer .fruitContainer{

    display: inline-block;

    font-size:0.4em;

    color:#006600;

    margin:-1em 3em 0 3em;

}



#UIContainer .scoreContainer{

    padding-top:1.2em;

    padding-left:2em;

}



#UIContainer .scoreContainer table{

    background-color: white;

    border-collapse: collapse;

    width:10em;

    margin-left:0.4em;

}

#UIContainer .scoreContainer td{

    font-size:0.4em;

    text-align: center;

    line-height: 1.5em;

    color:black;

}



#UIContainer .scoreContainer table,tr,th,td{

    border:solid 1px black;

}



#UIContainer .enterNameBox{

    position: absolute;

    font-size:0.4em;

    font-weight: bold;

    margin-top: 0.4em;

}



#UIContainer .enterNameBox div{

    display: inline-block;

    padding-left: 6em;

}



#UIContainer .enterNameBox input{

    font-size:1em;

    margin-left: -5em;

}





.spinning_2s{

 -webkit-animation-name: spin;

    -webkit-animation-duration: 2s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

	

    -moz-animation-name: spin;

    -moz-animation-duration: 2s;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

	

    -ms-animation-name: spin;

    -ms-animation-duration: 2s;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;

    

    animation-name: spin;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}

@-ms-keyframes spin {

    from { -ms-transform: rotate(0deg); }

    to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin {

    from { -moz-transform: rotate(0deg); }

    to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

    from {

        transform:rotate(0deg);

    }

    to {

        transform:rotate(360deg);

    }

}