*{

    box-sizing:border-box;

}

#UIContainer{

    font-family: 'arial';

}

#UIContainer div, #UIContainer td{

    -webkit-touch-callout: none;

    -webkit-user-select: none;

     -khtml-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

}



#UIContainer, #loadingContainer{

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

    background-size: cover;

}



#UIContainer .button{

    cursor:pointer;

    display:inline-block;

    color:black;

}

#UIContainer .button.disabled{

    cursor: auto;

    color:#666;

}



#UIContainer .button:hover{

    color:red;

}



#UIContainer .button.disabled:hover{

    color:#666;

}

#UIContainer .textBox{

    text-align: left;

    color:black;

    font-size:1.8em;

    padding:0.3em;

}

#UIContainer .textBox span{

    color:blue;

    text-decoration: underline;

}



#UIContainer .raceDescription{

    position: absolute;

    margin-left:29%;

    margin-top:1.6%;

    width:13.5%;

    font-size:0.66em;

    text-align: center;

    color:#33e;

}



#UIContainer .raceDescription div{

    padding-top: 0.8em;

    color:#007;

}



#assignNum{

    position: absolute;

    left: 1em;

    top: 7em;

    font-size: 0.6em;

    color: #000;

}



#UIContainer .record{

    position: absolute;

    margin-left:43.5%;

    margin-top:1.6%;

    width:14.5%;

    font-size:0.7em;

    text-align: center;

    color:#007;

}



#UIContainer .record div{

    padding-top: 0.4em;

    color:#33e;

    font-size:1.2em;

}



#UIContainer .score{

    position: absolute;

    margin-left:60%;

    margin-top:1.6%;

    width:9%;

    font-size:0.7em;

    text-align: left;

    color:#007;

}



#UIContainer .score div{

    padding-top: 0.4em;

    color:#33e;

    font-size:1.2em;

    padding-left:1em;

}



#UIContainer .medals{

    position: absolute;

    margin-left:70%;

    margin-top:1.3%;

    width:15%;

    font-size:0.7em;

    text-align: left;

    color:#007;

}



#UIContainer .medals div{

    position: relative;

    float:left;

    width:3em;

    height:1.7em;

    padding-top:1.5em;

    background-position: bottom;

    background-size: 100%;

    text-align: center;

    color:white;

}



#UIContainer #soundButton{

    position: absolute;

    margin-left:85%;

    margin-top:2%;

    width:1.6em;

    height:1.6em;

    background-size: cover;

    cursor: pointer;

}



#UIContainer .hurdles{

    position: absolute;

    margin-left:90%;

    margin-top:2.1%;

    width:8%;

}



#UIContainer .hurdles div{

    position: relative;

    float: right;

    margin-left:0.2em;

    height:1.7em;

    width:1em;

    background-size: cover;

}



#UIContainer #contestorMap{

    padding-top:2.7em;

    box-sizing: border-box;

}



#UIContainer .contestorRunway{

    box-sizing: border-box;

    width:89%;

    margin-left:4%;

    height:1.63em;

    margin-bottom:0.2em;

    font-size:0.6em;

    font-weight: bold;

}



#UIContainer .contestorRunway div{

    background-color: white;

    width:1.2em;

    height:1.2em;

    text-align: center;

    box-sizing: border-box;

    border-radius: 0.6em;

    margin-top:0.2em;

    cursor: auto;

}



#UIContainer #raceTime{

    width:100%;

    text-align: center;

    margin-top: 0.5em;

    color:white;

    font-size: 1.2em;

}



#UIContainer .nextRaceButton{

    color:#55c;

}



#UIContainer .nextRaceDescription{

    box-sizing: border-box;

    color:white;

    width:80%;

    padding-left:2em;

    padding-right:2em;

    margin-left:10%;

    font-size: 1.2em;

    line-height: 1.9em;

}

#UIContainer .gameOverDescription{

    box-sizing: border-box;

    color:white;

    width:100%;

    padding-left:7em;

    padding-right:5em;

    height:6em;

    cursor: default;

}



#UIContainer .gameOver{

    line-height:1.7em;

    box-sizing: border-box;

    color: white;

    font-size:2em;

    cursor: default;

}



#UIContainer .enterNameBox{

    box-sizing: border-box;

    border:solid 0.15em white;

    height:4em;

    margin-bottom:2%;

    padding-top:0.5em;

    width:12em;

    border-radius: 0.6em;

    color:white;

    cursor: default;

}



#UIContainer .invisible{

    opacity:0;

}



#UIContainer .enterNameBox.invisible input{

    cursor: default;

    width:0px;

    border:none;

    margin:0;

    padding:0;

}



#UIContainer .enterNameBox input{

    width:10em;

}



#UIContainer .highScore{

    height:2em;

    color:white;

}



#UIContainer table{

    border-collapse: collapse;

    width:39.85em;

    margin-left:0.4em;

}

#UIContainer td{

    font-size:0.8em;

    text-align: center;

    line-height: 2.45em;

    color:white;

}



#UIContainer table,tr,th,td{

    border:solid 0.1em rgba(255,255,255,0);

}



#UIContainer .simpleButton{

    display: inline-block;

    text-align: center;

    cursor: pointer;

    color:black;

    background-size:100% 100%;

    font-size:1.2em;

    line-height:3.5em;

    padding-left:3em;

    padding-right:3em;

}

#UIContainer .simpleButton:hover{

    color:red;

}



#UIContainer .arrowButton{

    display: inline-block;

    text-align: center;

    cursor: pointer;

    color:#44c;

    background-size:100% 100%;

    font-size:2em;

    line-height:2.5em;

    padding-left:1.5em;

    padding-right:2.2em;

}

#UIContainer .arrowButton:hover{

    color:#66f;

}



#UIContainer #podiumSign{

    box-sizing: border-box;

    color:white;

    padding:2em;

    text-align: center;

    font-size: 1.1em;

    line-height: 2em;

}



#UIContainer #podiumplayer1 img{

    position: absolute;

    width:40%;

    height: auto;

    margin-left:1.2em;

    margin-top:4.8em;

}



#UIContainer #podiumplayer2{

    margin-top:-0.8em;

}

#UIContainer #podiumplayer2 img{

    position: absolute;

    width:37%;

    height: auto;

    margin-left:1.3em;

    margin-top:5.5em;

}



#UIContainer #podiumplayer3{

    margin-top:-0.7em;

}

#UIContainer #podiumplayer3 img{

    position: absolute;

    width:40%;

    height: auto;

    margin-left:1.2em;

    margin-top:5.45em;

}



#UIContainer #podiumplayer4{

    margin-top:-0.1em;

}

#UIContainer #podiumplayer4 img{

    position: absolute;

    width:40%;

    height: auto;

    margin-left:1.2em;

    margin-top:5.0em;

}



#UIContainer #podiumplayer5{

    margin-top:-1.5em;

}

#UIContainer #podiumplayer5 img{

    position: absolute;

    width:36%;

    height: auto;

    margin-left:1.34em;

    margin-top:6.1em;

}



#UIContainer #podiumplayer6{

    margin-top:-0.1em;

    margin-left:-0.2em;

}

#UIContainer #podiumplayer6 img{

    position: absolute;

    width:40%;

    height: auto;

    margin-left:1.34em;

    margin-top:4.8em;

}



#UIContainer #podiumplayer7{

    margin-top:0.8em;

}

#UIContainer #podiumplayer7 img{

    position: absolute;

    width:31%;

    height: auto;

    margin-left:1.4em;

    margin-top:3.9em;

}



#UIContainer #podiumContainer{

    transform:scale(3);

}

#UIContainer #podiumContainer.zoom{

    animation:animatezoom 2s;

    transform:scale(1);

}

@keyframes animatezoom{from{transform:scale(3)} to{transform:scale(1)}}



#UIContainer #helpMenu h1{

    margin:0;padding:0;

    font-weight: normal;

    display: block;

    color:white;

    font-size:2em;

    padding-top:1em;

    text-align: center;

    padding-bottom: 0.3em;

}

#UIContainer #helpMenu p{

    display: block;

    color:white;

    font-size:1.2em;

    padding-left:7em;

    padding-right:5em;

    height:12em;

}



#UIContainer #raceList{

    width:100%;

    height:27em;

    display:flex;

    align-items:center;

    justify-content:center;

}



#UIContainer #raceList .container{

    display: inline-block;

    vertical-align: middle;

}



#UIContainer #raceList .container div{

    color:#fff;

    opacity: 0.5;

    display: block;

    cursor: default;

    font-size: 1.3em;

    margin-bottom: 0.8em;

}



#UIContainer #raceList .container div.on{

    opacity: 1.0;

    cursor: pointer;

}



.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);

    }

}