﻿body { background:#000000; padding:0px; margin:0px; overflow:hidden; z-index:0; position:relative; }
* { margin: 0; -webkit-user-select: none; font-family:Arial; }

#gameSurface {
}

.greyGradBack {
    background:url(/documents/html5/games/ratskate/img/c1d.png);
}

.button { float:left; width:72px; line-height:32px; height:32px; text-align:center; margin-right:4px; background:#222222; border-radius:4px; cursor:pointer; color:#ffffff; font-weight:bold; font-size:15px; }
.button.sel, .button:hover { background:#ffffff; color:#222222; }

.view { }

#playerHud { position:fixed; left:0px; bottom:0px; padding:8px 16px; background:rgba(0, 0, 0, 0.3); border-radius:0 12px 0 0; }
#playerHud .row { font-size:12px; overflow:hidden; margin:2px 0; }
#playerHud .row .t { float:left; color:#ffffff; padding:1px 0; background-position:0px center; background-repeat:no-repeat; font-size:10px; line-height:12px; }
#playerHud .row .g { float:left; color:#49EB49; padding-left:8px; font-size:10px; line-height:12px; }
#playerHud .row .t img { float:left; width:12px; }
#playerHud .row .t span { float:left; margin-left:2px; }

#editorHud { }
#editorHud .row { overflow:hidden; clear:both; }
#editorHud .item,
#editorHud label,
#editorHud .group { float:left; margin-right:8px; }
#editorHud label { line-height:30px; font-size:11px; color:#ffffff; }
#editorHud input.item { border:1px solid #888888; width:50px; height:22px; padding:4px; margin-right:0px; }
#editorHud .editorButton { background:#ffffff; border:1px solid #888888; color:#222222; padding:4px; height:22px; line-height:22px; font-size:11px; cursor:pointer; }


.negative { color:#F11313; font-weight:normal; }
.positive { color:#49EB49; font-weight:normal; }

.fullscreen { position:fixed; top:0px; left:0px; }
.logo { position:absolute; margin-left:-150px; left:50%; margin-top:60px; }
.sbutton { padding:10px; color:#222222; text-decoration:none; background:#ffffff; border:1px solid #444444; text-align:center; border-radius:50px; cursor:pointer; }
.sbutton:hover { text-decoration:none; }
.sbutton.startGame { width:200px; margin-left:-110px; left:50%; bottom:150px; position:absolute; text-decoration:none; }
.sbutton.startGame h1 { font-size:26px; text-decoration:none; }
.sbutton.loadGame { width:200px; margin-left:-110px; left:50%; bottom:110px; position:absolute; text-decoration:none; }
.sbutton.loadGame h1 { font-size:26px; text-decoration:none; }
.sbutton.disabled { opacity:0.5; }
#snappyRecommend a.sbutton { margin-bottom:8px; }

.snappyLogo { width:233px; }

.popupContent { position:absolute; width:320px; height:460px; z-index:3; top:0px; }
#popupCover { background:rgba(0,0,0,0.5); position:absolute; top:0px; left:0px; z-index:2; }
.miniPopup { z-index:3; position:absolute; overflow:hidden; width:264px; left:50%; margin:0px 0 0 -140px; padding:0px; border:1px solid #000000; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.miniPopup p { float:left; width:100%; color:#ffffff; }
.miniPopup .buttons { overflow:hidden; width:100%; padding:8px 0 0 0; text-align:center; }
.miniPopupItem .header,
#snappyRecommend .top
{ text-align:center; padding:8px; background:rgba(0,0,0,0.8); color:#ffffff; font-weight:bold; font-size:16px; text-transform:uppercase; }
.miniPopupItem .rows { padding:8px; overflow:hidden; clear:left; }

#summary { color:#ffffff; }
#summary .row { overflow:hidden; }
#summary .row.total { margin:6px 40px; border-top:1px solid #cccccc; padding:6px 0 0 0; }
#summary .row .left { float:left; width:40%; text-align:right; }
#summary .row .right { float:left; width:60%; text-align:left; }
#summary .row .right .starCanvas,
#summary .row .right strong { padding-left:8px; }
#summary .row .right .starCanvas { float:left; width:18px; }
#summary .row .right span { float:left; }
#summary .row totalScore.right { font-weight:bold; }
#summary #gameoverRetry { width:90px; margin-left:5px; float:left; }
#summary #gameoverContinue { width:90px; margin-left:12px; float:left; }

#highscore { }
#highscore .username { margin:12px 0; text-align:center; }
#highscore input { padding:4px; font-size:14px; border:1px solid #444444; font-family:Arial; -webkit-user-select:auto; }
#highscore .notice { margin:12px 0; color:#f0f0f0; font-style:italic; font-size:11px; line-height:11px; text-align:center; }
#highscore .buttons { overflow:hidden; clear:both; }
#highscore .sbutton { width:150px; margin-left:45px; }

.miniPopup p.bestScore { text-align:center; font-size:12px; color:#222222; margin:10px 0 10px 0; }

#pleaseWait { width:150px; height:50px; margin-left:-75px; margin-top:-25px; border:2px solid #bbbbbb; background:#ffffff; color:#222222; font-weight:bold; font-size:15px; position:absolute; left:50%; top:50%; z-index:100; -webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.2); box-shadow: 0 0 5px 1px rgba(0,0,0,0.1); }
#pleaseWait .inner { padding:16px;  }

#viewCanvas { position:relative; }

#lives { position: fixed; left: 4px; bottom:4px; height:32px; }
#lives img { float:left; width:32px; }
#lives .r { float:left; width:68px; margin-left:2px; }
#lives .r .t { color:#E7E700; font-weight:bold; font-size:15px; line-height:16px; text-align:right;text-shadow: 1px 1px 1px #000000; }
#lives .r .b { overflow:hidden; }
#lives .r .b span.x { float:left; color:#ffffff; font-size:12px; line-height:16px; width:24px; text-align:right;text-shadow: 1px 1px 1px #000000; }
#lives .r .b span#lifeC { float:right; color:#ffffff; font-size:15px; line-height:16px; font-weight:bold;text-shadow: 1px 1px 1px #000000; }

#playerHud .ingame { }
#playerHud .ingame img { float:left; width:16px; }
#playerHud .ingame span { float:left; color:#ffffff; font-size:16px; line-height:16px; font-weight:bold; margin-left:4px; }

#levs { }
#levs .row { overflow:hidden; }
#levs .row.normal { margin:0 0 10px 0; }
#levs .row.bottom { margin:0 0 0 0; }
#levs .row span { color:#ffffff; font-size:20px; text-align:center; display:block; }
#levs .row .item { width:116px; height:116px; border:1px solid #000000; position:relative; opacity:0.3; cursor:pointer; }
#levs .row .item img { width:116px; }
#levs .row .item span { width:100%; display:none; text-align:center; color:#ffffff; position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.8); line-height:22px; font-size:14px; }
#levs .row .item.lEnable span { display:block; }
#levs .row .item.lEnable:hover span { color:#000000; background:rgba(255,255,255,0.8); }
#levs .row .item.lEnable:hover { border-color:#ffffff; }
#levs .row .item.lEnable { opacity:1; }
#levs .row .l { float:left; margin:0 12px 0 0; }
#levs .row .m { float:left; margin:0 12px 0 12px; }
#levs .row .r { float:left; }

#eolad { left:50%; margin-left:-150px; z-index:999; position:absolute; width:300px; height:250px; }
#eolad .close { position:absolute; bottom:-40px; left:50%; margin-left:-16px; }
#eolad .close img { width:32px; }

#msg { transition:all 1.0s ease-in-out; position:absolute; font-size:28px; width:320px; text-align:center; margin-left:-160px; left:50%; color:#ffffff; text-shadow: 1px 1px 1px #000000; }

#loader { position: relative; width: 100%; background: #000000; overflow: hidden; }
#loader p { text-align:center; font-weight:bold; margin:80px 0 0 0; color:#ffffff; }
#loader .bar { width: 200px; height: 20px; margin: 40px 0; position: relative; margin-left: -100px; left: 50%; background: rgba(255,255,255,0.2); }
#loader .bar .inner { position: absolute; left: 0px; height: 20px; background: #71A12D; }

#loader .ad { margin: 20px auto 0px auto; width: 300px; }
#loader .skip { width: 120px; text-decoration: none; text-align: center; margin: 10px auto; display: block; font-family: Arial; font-weight: bold; padding: 15px; background: #FFD91E; border-radius: 10px; color: #222222; font-size: 16px; }

#gameContainer { position: relative; margin: 0 auto; }

@media only screen and (max-width: 480px) {
    #lapInfo { top: 50px; }
    #posInfo { top: 50px; }
}