#tcsurf {
    width:512px;
    height:480px;
    overflow:hidden;
    position:relative;
    margin: 0 auto;
}

#tcsurf #tcsurf-overlay {
    width:512px;
    height:480px;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    background-image:url(../img/tc/tcsurf-overlay.png);
    background-repeat:no-repeat;
    background-position:0 0;
    display:none;
}

#tcsurf #tcsurf-overlay.splashscreen {
    display:block;
}

#tcsurf #tcsurf-overlay.gamestart {
    background-position:-512px 0;
    display:block;
}

#tcsurf #tcsurf-overlay.gameover {
    background-position:-1024px 0;
    display:block;
}

#tcsurf #tcsurf-overlay.congrats {
    background-position:-1536px 0;
    display:block;
}

#tcsurf #tcsurf-bg {
    height:352px;
    width:12286px;
    display:block;
    position:absolute;
    top:0;
    left:0px;
    z-index:3;
    background-repeat:no-repeat;
    background-position:0 0;
    background-image:url(../img/tc/tcsurf-bg.png);
}

#tcsurf #tcsurf-bg .grid {
    width: 30px;
    height: 30px;
    border:1px solid #FF00FF;
    position:absolute;
    font-size:10px;
    text-align:center;
    line-height:20px;
}

/**** tcsurf-dude *****/

#tcsurf #tcsurf-dude {
    position:absolute;
    top:240px;
    left:200px;
    z-index:5;
    width:76px;
    height:80px;
    background-image:url(../img/tc/tcsurf-dude.png);
    background-position:0 0;
}

/* poses */

#tcsurf #tcsurf-dude.tcIdle {
    background-position:-76px 0;
}

#tcsurf #tcsurf-dude.tcPedal {
    background-position:-304px 0;
}

#tcsurf #tcsurf-dude.tcUp {
    background-position:-152px 0;
}

#tcsurf #tcsurf-dude.tcDown {
    background-position:-228px 0;
}

#tcsurf #tcsurf-dude.tcJump {
    background-position:-380px 0;
}


#tcsurf #tcsurf-dude.tcCrash {
    background-position:-532px 0;
}

#tcsurf #tcsurf-dude.tcImpact {
    background-position:-456px 0;
}

#tcsurf #tcsurf-dude.tcFall {
    background-position:-608px 0;
}

#tcsurf #tcsurf-dude.tcVictory {
    background-position:-684px 0;
}

/****** tcsurf-ui *******/

#tcsurf #tcsurf-ui {
    background-image: url(../img/tc/tcsurf-ui-bg.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    position:absolute;
    top:346px;
    left:0;
    z-index:7;
    height:134px;
    width:512px;
}

#tcsurf-stage {
    position:absolute;
    top:0px;
    left:-64px;
    padding:8px 2px 2px 2px;
    width:28px;
    height:28px;
    background-repeat:no-repeat;
    background-image:url(../img/tc/tcsurf-ui.png);
    background-position:-120px 0;
}

#tcsurf-stage li#the-stage {
    margin-left:4px;
}

#tcsurf-life {
    position:absolute;
    left:324px;
    top:72px;
    width:64px;
    list-style:none;
}

#tcsurf #tcsurf-life li {
    float:left;
    width:14px;
    height:14px;
    background:url(../img/tc/tcsurf-ui.png) no-repeat -152px 0;
    margin:0 2px 2px 0;
    padding: 0;
}

/* numbers */

#tcsurf-clock {
    list-style:none;
    position:absolute;
    top:56px;
    left:210px;
}

#tcsurf-clock li#tcsurf-secs1 {
    margin-right:5px;
}

#tcsurf-clock li, #tcsurf-stage li {
    background-image:url(../img/tc/tcsurf-ui.png);
    background-repeat:no-repeat;
    width:12px;
    height:28px;
    float:left;
    margin:0;
    padding:0;
}

#tcsurf-clock li {
    margin:0 20px 0 0;
}

#tcsurf .num0 {
    background-position:0 0;
}

#tcsurf .num1 {
    background-position:-12px 0;
}

#tcsurf .num2 {
    background-position:-24px 0;
}

#tcsurf .num3 {
    background-position:-36px 0;
}

#tcsurf .num4 {
    background-position:-48px 0;
}

#tcsurf .num5 {
    background-position:-60px 0;
}

#tcsurf .num6 {
    background-position:-72px 0;
}

#tcsurf .num7 {
    background-position:-84px 0;
}

#tcsurf .num8 {
    background-position:-96px 0;
}

#tcsurf .num9 {
    background-position:-108px 0;
}