body {
    margin: 0;
    padding: 0;

}

body.game,
body.help,
body.leaderboards
{
    background-image: url("../img/gradient.png");
    background-repeat: repeat-x;
    background-color: #f5f6f7;
}

.button {
    display: block;
    background-repeat: no-repeat;
}

.button span {
    display: none;
}

#twinoo .button {
    background-image: url("../img/buttons.png");
}

#twinoo .button.alltime{ background-position: 0 0; width: 205px; height: 63px; }
#twinoo .button.alltime_selected{ background-position: 0 -73px; width: 205px; height: 63px; }
#twinoo .button.alltime:hover{ background-position: 0 -146px; width: 205px; height: 63px; }
#twinoo .button.back{ background-position: 0 -386px; width: 129px; height: 48px; }
#twinoo .button.back:hover{ background-position: 0 -444px; width: 129px; height: 48px; }
#twinoo .button.dawnofplay{ background-position: 0 -502px; width: 102px; height: 110px; }
#twinoo .button.dawnofplay:hover{ background-position: 0 -622px; width: 106px; height: 114px; }
#twinoo .button.facebook{ background-position: 0 -746px; width: 83px; height: 83px; }
#twinoo .button.facebook:hover{ background-position: 0 -839px; width: 83px; height: 83px; }
#twinoo .button.facebook_small{ background-position: 0 -932px; width: 42px; height: 42px; }
#twinoo .button.facebook_small:hover{ background-position: 0 -984px; width: 42px; height: 42px; }
#twinoo .button.games{ background-position: 0 -1355px; width: 213px; height: 71px; }
#twinoo .button.games:hover{ background-position: 0 -1436px; width: 213px; height: 71px; }
#twinoo .button.help{ background-position: 0 -1517px; width: 213px; height: 71px; }
#twinoo .button.help:hover{ background-position: 0 -1598px; width: 213px; height: 71px; }
#twinoo .button.leaderboards{ background-position: 0 -1679px; width: 224px; height: 71px; }
#twinoo .button.leaderboards:hover{ background-position: 0 -1760px; width: 224px; height: 71px; }
#twinoo .button.play{ background-position: 0 -1841px; width: 224px; height: 71px; }
#twinoo .button.play2{ background-position: 0 -1922px; width: 213px; height: 71px; }
#twinoo .button.play2:hover{ background-position: -401px 0; width: 213px; height: 71px; }
#twinoo .button.play:hover{ background-position: -401px -81px; width: 224px; height: 71px; }
#twinoo .button.restart{ background-position: -401px -162px; width: 224px; height: 71px; }
#twinoo .button.restart:hover{ background-position: -401px -243px; width: 224px; height: 71px; }
#twinoo .button.send_score{ background-position: -401px -324px; width: 295px; height: 83px; }
#twinoo .button.send_score:hover{ background-position: -401px -417px; width: 295px; height: 83px; }
#twinoo .button.thisweek{ background-position: -401px -510px; width: 205px; height: 63px; }
#twinoo .button.thisweek_selected{ background-position: -401px -583px; width: 205px; height: 63px; }
#twinoo .button.thisweek:hover{ background-position: -401px -656px; width: 205px; height: 63px; }
#twinoo .button.today{ background-position: -401px -729px; width: 205px; height: 63px; }
#twinoo .button.today_selected{ background-position: -401px -802px; width: 205px; height: 63px; }
#twinoo .button.today:hover{ background-position: -401px -875px; width: 205px; height: 63px; }
#twinoo .button.twitter{ background-position: -401px -948px; width: 83px; height: 83px; }
#twinoo .button.twitter:hover{ background-position: -401px -1041px; width: 83px; height: 83px; }
#twinoo .button.twitter_small{ background-position: -401px -1134px; width: 42px; height: 42px; }
#twinoo .button.twitter_small:hover{ background-position: -401px -1186px; width: 42px; height: 42px; }
#twinoo .life.lost{ background-position: -401px -1238px; width: 28px; height: 28px; }
#twinoo .gameover{ background-position: -223px -1347px; width: 391px; height: 400px; }
#twinoo .button.radio { background-position: -394px -1327px; width: 21px; height: 21px }
#twinoo .button.radio_on { background-position: -394px -1291px; width: 21px; height: 21px }

#twinoo .button.amazon_appstore {background: url("../img/Amazon_Appstore_50.png"); width: 150px; height: 50px; }
#twinoo .button.wp7_marketplace {background: url("../img/WindowsPhone_50.png"); width: 149px; height: 48px; }
#twinoo .button.bb_appworld {background: url("../img/BBWorld_50.png"); width: 145px; height: 48px; }

#twinoo .button.appstore {background: url("../img/App_Store_50.png"); width: 170px; height: 50px; }

#twinoo {
    width: 950px;
    height: 800px;

    background-color: transparent;
    background-repeat: no-repeat;

    margin: 0 auto;

    position: relative;

    font-family: sans-serif;
}

.home #twinoo {
    background-image: url("../img/home.png");
    background-color: white;
}
.help #twinoo {
    background-image: url("../img/help.png");
}
.game #twinoo {
    background-image: url("../img/game.png");
}

#twinoo h1 {
    position: absolute;
    width: 208px;
    height: 63px;
    background-image: url("../img/title.png");
    background-repeat: no-repeat;

    left: 50%;

    margin:0;
    padding: 0;

    margin-left: -104px;

    top: 50px;

    
}

#twinoo h1 a {
    display: block;
    width: 100%;
    height: 100%;
}

#twinoo h1 span {
    display: none;
}


.home #twinoo h1 {
    top: 50px;
}

#twinoo .button.dawnofplay {
    position: absolute;

    top: 20px;
    left: 40px;
}

#twinoo .button.appstore {
    position: absolute;

    top: 10px;
    right: 0px;
}

#twinoo .button.amazon_appstore {
    position: absolute;

    top: 80px;
    right: 10px;
}
#twinoo .button.wp7_marketplace {
    position: absolute;
	visibility: hidden;

    top: 160px;
    right: 10px;
}
#twinoo .button.bb_appworld {
    position: absolute;
	visibility: hidden;

    top: 240px;
    right: 10px;
}

.game #twinoo .tutorial {
	background-image: url(../img/tutorial.png);
	width: 702px;
	height: 548px;
	position:absolute;
	top: 152px;
	left: 50%;
	margin-left: -340px;
	z-index:20;
    cursor: pointer;
}

.game #twinoo .gameover {
    display: none;
    background-image: url("../img/buttons.png");
    background-repeat: no-repeat;

    position: absolute;

    top: 155px;
    left: 50%;

    margin-left: -192px;

    z-index: 10;
}

.game #twinoo .gameover .send_score {
    border: 0;
    background-color: transparent;
    cursor: pointer;

    position: absolute;

    top: 309px;
    left: 50%;
    margin-left: -147px;
}

.game #twinoo .gameover form .player_name {
    position: absolute;

    top: 164px;
    left: 125px;

    width: 200px;
    height: 18px;

    font-family: sans-serif;
    font-size: 16px;

    border: solid 1px #E5E5E5;
    border-radius: 3px;
    padding: 5px 2px;
}

.game #twinoo .gameover form .player_age {
    position: absolute;

    top: 214px;
    left: 125px;

    width: 200px;
    height: 18px;

    font-family: sans-serif;
    font-size: 16px;

    border: solid 1px #E5E5E5;
    border-radius: 3px;
    padding: 5px 2px;
}

.game #twinoo .gameover .male, .game #twinoo .gameover .female {
	position:absolute;
	top: 270px;
	height: 21px;
	cursor: pointer;
	width: 80px;
}

.game #twinoo .gameover .male {
	left: 135px;
}

.game #twinoo .gameover .female {
	left: 236px;
}

.game #twinoo .left {
    width: 50%;
    position: absolute;
}

.game #twinoo .right {
    width: 50%;

    position: absolute;

    right: 0;
}

.game #twinoo .score {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: #4e4e4e;
    text-shadow: 2px 4px #ccc;

    top: 237px;
}

.game #twinoo .score.total {
    position: absolute;

    font-size: 70px;

    text-align: center;

    width: 300px;

    left: 50%;
    margin-left: -150px;

    z-index: 11;
}

.game #twinoo .left .score {
    left: 165px;
}

.game #twinoo .right .score {
    right: 165px;
}




.game #twinoo .lives {
    position: absolute;
    top: 169px;

    width: 150px;
    height: 28px;
    overflow: hidden;
}

.game #twinoo .left .lives {
    left: 167px;
}

.game #twinoo .right .lives {
    right: 168px;
}

.game #twinoo .life {
    width: 28px;
    height: 28px;
}

.game #twinoo .left .life {
    float: left;
    margin-right: 14px;
}

.game #twinoo .right .life {
    float: right;
    margin-left: 14px;
}

.game #twinoo .life.lost {
    background-image: url("../img/buttons.png");
    background-repeat: no-repeat;
    background-color: #eb2728;
}

.game #twinoo .time {
    position: absolute;

    top: 211px;

    height: 16px;
}

.game #twinoo .left .time {
    left: 167px;
    width: 295px;
}

.game #twinoo .right .time {
    right: 167px;
    width: 295px;
}

.game #twinoo .time .remaining {
    position: absolute;
    width: 100%;
    height: 16px;

    background-color: #eb2728;
    background-image: url("../img/timer.png");
    background-repeat: repeat-x;
}

.game #twinoo .left .time .remaining{
    right: 0;
}

.game #twinoo .question {
    position: absolute;

    top: 342px;

    width: 80%;
    height: 100px;
    overflow: hidden;
}

.game #twinoo .left .question{
    left: 175px;
}

.game #twinoo .right .question{
    left: 30px;
}

.game #twinoo .operand1,
.game #twinoo .operator,
.game #twinoo .operand2,
.game #twinoo .answers .answer
{
    font-weight: bold;

    width: 90px;
    height: 90px;

    text-align: center;
    vertical-align: baseline;
    line-height: 90px;
}

.game #twinoo .left .operand1,
.game #twinoo .left .operator,
.game #twinoo .left .operand2
{
    font-size: 80px;
    color: #333333;
    text-shadow: 2px 4px #ccc;
    float: left;
}

.game #twinoo .right .operand1,
.game #twinoo .right .operand2 {
    background-image: url("../img/game.png");
    background-repeat: no-repeat;
}


.game #twinoo .right .operand1 {
    position: absolute;

    background-position: -505px -342px;
}

.game #twinoo .right .operand2 {
    position: absolute;

    left: 174px;

    background-position: -679px -342px;
}

.game #twinoo .right .operator {
    display: none;
}

.game #twinoo .answers {
    position: absolute;

    width: 100%;
    top: 474px;

    height: 90px;
}

.game #twinoo .answers .answer {
    position: absolute;
    display: block;

    font-size: 70px;
    color: #4e4e4e;
    text-shadow: 2px 4px #ccc;
    text-decoration: none;

    background-color: transparent;
}

.game #twinoo .left .answers .answer.no1 {
    left: 164px;
}
.game #twinoo .left .answers .answer.no2 {
    left: 267px;
}
.game #twinoo .left .answers .answer.no3 {
    left: 370px;
}


.game #twinoo .right .answers .answer {
    background-image: url("../img/game.png");
    background-repeat: no-repeat;
}

.game #twinoo .right .answers .answer.no1 {
    left: 13px;

    background-position: -488px -474px;
}
.game #twinoo .right .answers .answer.no2 {
    left: 115px;

    background-position: -590px -474px;
}
.game #twinoo .right .answers .answer.no3 {
    left: 217px;
    background-position: -692px -474px;
}



.game #twinoo .answers .answer:hover {

}


.game #twinoo .restart {
    position: absolute;

    top: 600px;
    left: 365px;

    z-index: 10;
}


#twinoo .navigation {
    position: absolute;

    top: 256px;
    left: 152px;

    height: 68px;
    width: 700px;
}

#twinoo .play_navigation {
	top: 684px; /* Overrides the navigation position on the play page! */
}

#twinoo .navigation .button {
    float: left;

}

.help #twinoo .back {
    position: absolute;

    top: 685px;
    left: 410px;
}

.home #twinoo .button.appstore {
    left: 302px;
    top: 300px;
}

.home #twinoo .button.amazon_appstore {
    left: 480px;
    top: 300px;
}
.home #twinoo .button.wp7_marketplace {
	visibility: visible;
    left: 640px;
    top: 301px;
}
.home #twinoo .button.bb_appworld {
	visibility: visible;
    left: 150px;
    top: 301px;
}

.home #twinoo .twinoo-icon {
    position: absolute;
    top: 20px;
    right: 10px;
}

.home #twinoo .twinoo-icon img {
    border: none;
}

.home #twinoo a.play{
    text-align: center;
    
    display: block;

    position: absolute;

/* 	 top: 205px; */
	 top: 123px;

    width: 100%;
    height: 80px;

    color: #343434;

    font-family: sans-serif;
    font-size: 40px;

    text-decoration: none;
}

.home #twinoo a.play:hover{
    color: #787878;
}

.dream-of-pixels {
	top: 436px;
	background-image: url(../img/dream_of_pixels_ad.png);
	position: absolute;
	height: 320px;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	float: left;
	word-spacing: 35px;
	text-align: center;
}

.dream-of-pixels a {
	display: inline-block;
	margin-top: 253px;
	position: relative;
	left: 51px;
}

.dream-of-pixels span {
	display: none;
}

.dream-of-pixels .appstore {
	background-image:url(../img/dopx-appstore.png);
	width: 142px;
	height: 43px;
}
.dream-of-pixels .amazon {
	background-image:url(../img/dopx-amazon.png);
	width: 119px;
	height: 41px;
}
.dream-of-pixels .google-play {
	background-image:url(../img/dopx-google.png);
	width: 118px;
	height: 42px;
}


.leaderboards #twinoo table {
    border-collapse: collapse;
    padding: 0;

    font-family: sans-serif;

    position: absolute;
    top: 210px;
    left: 110px;
}

.leaderboards #twinoo table thead {
    color: #ed2024;

    font-size: 25px;
    text-align: center;
}

.leaderboards #twinoo table tbody {
    color: #828282;

    font-size: 20px;
}

.leaderboards #twinoo table th {
    height: 95px;
    vertical-align: middle;
    padding-right: 25px;
}

.leaderboards #twinoo table td,
.leaderboards #twinoo table td div
{
    height: 25px;
    overflow: hidden;
}


.leaderboards #twinoo table td.place {
    width: 50px;
    text-align: right;
    padding-right: 35px;

}

.leaderboards #twinoo table td.name,
.leaderboards #twinoo table td.name div
{
    width: 135px;
}

.leaderboards #twinoo table td.score {
    width: 40px;
    text-align: right;
    padding-right: 25px;

    color: #ed2024;
}

.leaderboards #twinoo table tr.playerscore {
    font-weight: bold;
}

.leaderboards #twinoo table tr.share {
    vertical-align: middle;

    height: 35px;
    line-height: 35px;

}
.leaderboards #twinoo table tr.share a {
    float: right;
}





.leaderboards #twinoo .interval {
    position: absolute;

    top: 145px;
    left: 175px;

    height: 68px;
    width: 700px;
}

.leaderboards #twinoo .interval .button {
    float: left;
}

#twinoo #footer {
    font-family: sans-serif;
    font-size: 13px;
    color: #111111;

    position: absolute;

    top: 780px;
    left: 65px;

    width: 840px;
}

#twinoo #footer .follow {
    float: left;
}

#twinoo #footer .social {

    position: absolute;

    left: 50%;
    width: 225px;
    margin-left: -102px;
}

#twinoo #footer .copyright {
    float: right;

}

#twinoo #footer a{ color: #4e4e4e; text-decoration: underline;}
#twinoo #footer a:hover{ color: #787878;}