#UIContainer, #loadingContainer{
    font-family: arial;
    background-image: url(../assets/images/uis/menuBG.png);
    background-size: cover;
    overflow: hidden;
    color:#79cdef;
}
#layer1{
    background-repeat: repeat;
}
#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 .button{
    position: absolute;
    display: inline-block;
    padding:0.1em 1em;
    font-size:1em;
    color:#fff;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 0.1em 0.1em 0.3em rgba(0,0,0,0.5);
    cursor: pointer;
    
    background: #8fd4f4;
    background: -webkit-linear-gradient(#8fd4f4 49%,#8fd4f4 1%,#71c9f1 50%);
    background: -o-linear-gradient(#8fd4f4 49%,#8fd4f4 1%,#71c9f1 50%);
    background: -moz-linear-gradient(#8fd4f4 49%,#8fd4f4 1%,#71c9f1 50%);
    background: linear-gradient(#8fd4f4 49%,#8fd4f4 1%,#71c9f1 50%);
}

#UIContainer .button:hover{
    background: #ff8737;
    background: -webkit-linear-gradient(#ff8737 49%,#ff8737 1%,#ff6600 50%);
    background: -o-linear-gradient(#ff8737 49%,#ff8737 1%,#ff6600 50%);
    background: -moz-linear-gradient(#ff8737 49%,#ff8737 1%,#ff6600 50%);
    background: linear-gradient(#ff8737 49%,#ff8737 1%,#ff6600 50%);    
}

#UIContainer .button.big{
    font-size:2.5em;
    padding:0.2em 0em;
    font-weight: bold;
}

#UIContainer .menuBox .button{
    width:100%;
    position: relative;
}
#UIContainer .menuBox{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top:40%;
    height:50%;
    width:36%;
    left:32%;
    color:#fff;
    text-align: center;
}

#UIContainer .menuTitle{
    text-align: center;
    padding-top: 0.1em;
    font-size: 1.6em;
    font-weight: bold;
}

#UIContainer .menuHistoryContainer{
    display: inline-block;
    padding-top:0.8em;
    padding-bottom:0.5em;
}

#UIContainer .menuHistoryContainer table{
    text-align: center;
}

#UIContainer .menuHistoryContainer td{
    width: 50%;
    white-space: nowrap;
}

#UIContainer .menuBox .resetHistory{
    color:#00cccc;
    cursor: pointer;
}

#UIContainer .menuBox .resetHistory:hover{
    color:#ff6600
}

#UIContainer #levelContainer{
    position: absolute;
}

#UIContainer #levelUpCVS{
    float: left;
}

#UIContainer .smallPanel{
    position: absolute;
    float: left;
    font-size:1.5em;
    border-radius:0.15em;
    border:solid 1px #000;
    box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.7);
     white-space: nowrap;
}
#UIContainer .smallPanel .smallPanelI{
    display: block;
    border-radius:0.15em;
    border:solid 0.33em #2fd0fc;
    color:#034f66;
    background-color: #2fd0fc;
}

#UIContainer .smallPanel .smallPanelI div{
    border-radius:0.15em;
    background-color: #fff;
    padding:0.2em;
}

#UIContainer .smallPanel .smallPanelI div span{
    display: inline-block;
    border-radius:0.1em;
    background-color: #d5f7ff;
    border:solid 1px #9aedf1;
    margin-left:0.66em;
    width:3em;
    text-align: center;
    color:#6e6761;
}

#UIContainer .smallPanel.blink .smallPanelI div{
    animation-name: scoreBlink;
    animation-duration: 0.2s;
    animation-iteration-count: 4;
    animation-timing-function: linear;
    animation-direction: alternate;
}

#UIContainer .smallPanel.blink .smallPanelI div span{
    animation-name: scoreBlink2;
    animation-duration: 0.2s;
    animation-iteration-count: 4;
    animation-timing-function: linear;
    animation-direction: alternate;
}

#UIContainer #spaceBarTutorial{
    position: absolute;
    padding:0.5em;
    background-color: rgba(0,0,0,0.6);
    font-weight: bold;
    font-size:1.5em;
    color:white;
}

@keyframes scoreBlink{
    from { background-color:#fff; }
    to { background-color:#f00; }
}

@keyframes scoreBlink2{
    from { background-color:#d5f7ff;border:solid 1px #9aedf1; }
    to { background-color:#f00;border:solid 1px #600; }
}

#UIContainer #livesContainer{
    text-align: center;
    height:1.7em;
    width:7em;
}
#UIContainer #livesContainer img{
    height:1.3em;
    padding-left: 0.3em;
	padding-top: 0; 
}

#UIContainer #typingContainer{
    text-align: center;
    height:1.6em;
    width:13em;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-weight: bold;
    color:#6e6761;
	padding-top: 0; 
}

#UIContainer #typingContainer b{
    color:#0006f6;
    text-decoration: underline;
}

#UIContainer #topBar div{
    position: absolute;
    top:0.3em;
}

#UIContainer #topBar #startPause{
    position: relative;
    top:0.1em;
    background-repeat: no-repeat;
    background-size: auto 100%;
    cursor: pointer;
    height:1.3em;
    width:2em;
}

#UIContainer #topBar #muteButton{
    position: relative;
    top:0.1em;
    background-repeat: no-repeat;
    background-size: auto 100%;
    cursor: pointer;
    height:1.3em;
    width:2em;
}
#UIContainer h1{
    color:#fdffcb;
    font-size: 3em;
    margin:0px;
    padding:0px;
    margin-top:0.3em;
}

#UIContainer h2{
    color:#fff;
    margin:0px;
    padding:0px;
}

#UIContainer .historyNameBox{
    display: inline-block;
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0em 0em 0.4em rgba(0,0,0,0.5);
    padding:1em;
    color:#fff;
    font-weight: bold;
    margin-top: 0.8em;
}

#UIContainer .historyNameBox input{
    background-color: #fff;
    border:none;
    color:#000;
    width:10em;
    font-size: 1em;
    font-weight: normal;
    display: block;
    margin-top: 0.3em;
    text-align: center;
}

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