/* Open Sans Font */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:900,700&subset=latin,latin-ext);

.htmlView {	position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.htmlView * { color: #000; font-family: "Titillium+Web", sans-serif; }

.button-clickable, .button-clickable * { cursor: pointer; }
button.viewButton {	border: none; }

.textButton .button-text-container { display: table; }
.textButton .button-text-container .button-text { display: table-cell; vertical-align: middle; text-align: center; }

/* Preload screen style */
#preloadScreen
{
	width: 853px; height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/preloadScreen/bkg.jpg) no-repeat;
}

.titleBackground
{
	position: absolute;
	left: 183px;
	top: 87px;
	width: 504px;
	height: 24px;
	background: url(../assets/html/img/preloadScreen/back-title.png) no-repeat;
}

#tips
{
	position: absolute;
	left: 18%;
	top: 325px;
	width: 572px;
	height: 73px;
	background: url(../assets/html/img/preloadScreen/txt-box-white.png) no-repeat;
}

#tipsTitle
{
	position: absolute;
	top: 0px;
	width:100%;
	text-align: center;
	font-family: "Titillium Web";
	font-weight: 900;
	font-style: normal;
	font-size: 28px;
	line-height: 30px;
	display:inline-block;
	vertical-align: middle;
}

#tipsText
{
	position: absolute;
	top: 26px;
	left: 21px;
	width: 92%;
	line-height: 20px;
	text-align: center;
	font-family: 'Titillium Web', sans-serif;
 	font-size:20px;
	display:inline-block;
	vertical-align: middle;
	/*border: 1px solid red;*/
}

#loadingBackground
{
	position: absolute;
	left: 35%;
	top: 415px;
	width: 240px;
	height: 43px;
	background: url(../assets/html/img/preloadScreen/loading-background.png) no-repeat;
}

#loadingText
{
	position: absolute;
	left: 0px;
	width: 100%;
	top: 5px;

	text-align: center;
	font-family: "Titillium Web";
	font-weight: 900;
	font-style: normal;
	font-size: 32px;
	line-height: 30px;
}

#loadingBarLeft
{
	position: absolute;
	left: 2px;
	top: 2px;
	width: 24px;
	height: 39px;
	background: url(../assets/html/img/preloadScreen/loading-left.png) no-repeat;
}

#loadingBarMiddle
{
	position: absolute;
	left: 26px;
	top: 2px;
	width: 1px;
	height: 39px;
	background: url(../assets/html/img/preloadScreen/loading-bar.png) no-repeat;
}

#loadingBarRight
{
	position: absolute;
	left: 27px;
	top: 2px;
	width: 24px;
	height: 39px;
	background: url(../assets/html/img/preloadScreen/loading-right.png) no-repeat;
}

.btnTapToLoad
{
	position: absolute;
	top:410px;
	left:28%;
	width: 344px;
 	height: 68px;
}

.btnTapToLoad div
{
	position: absolute;
	top:7px;
	width:100%;
	text-align: center;
 	font-size:30px;
	display:inline-block;
	vertical-align: middle;
}

.btnTapToLoad div:active
{
	color:black !important;
}

.btnTapToLoad-off
{
	background: url(../assets/html/img/preloadScreen/btn-tapToLoad-off.png) no-repeat;
}

.btnTapToLoad-on
{
	background: url(../assets/html/img/preloadScreen/btn-tapToLoad-click.png) no-repeat;
	color:black;
}

.btnTapToLoad-over
{
	background: url(../assets/html/img/preloadScreen/btn-tapToLoad-over.png) no-repeat;
}

#loadPercentage
{
	position: absolute;
	top:390px;
	left:45%;
	text-align: center;
 	font-size:40px;
}

/* Title screen style */
#titleScreen 
{ 
	width: 853px; 
	height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/titleScreen/bkg.jpg) no-repeat;
}

.transformerLogo
{
	background: url(../assets/html/img/titleScreen/top-logo.png) no-repeat center;
	width: 350px;
	height: 60px;
	margin: 10px auto;
}

.transformerLogoSplashScreen
{
	background: url(../assets/html/img/titleScreen/top-logo-splash.png) no-repeat center;
	width: 346px;
	height: 72px;
	position: absolute;
	left:225px;
	top:20px;
}

.gameTitle
{
	font-size: 60px;
}

.btnPlay
{	
	text-align: center;
	position: absolute;
	top:410px;
	left:37%;
	width: 218px;
 	height: 64px;
}

.btnPlay div
{
	width:100%;
	line-height:50px;
	text-align: center;
 	font-size:30px;
	display:inline-block;
	vertical-align: middle;
}

.btnPlay div:active
{
	color:black !important;
}

.btnPlay-off
{
	background: url(../assets/html/img/titleScreen/btnPlay-off.png) no-repeat;
}

.btnPlay-on
{
	background: url(../assets/html/img/titleScreen/btnPlay-on.png) no-repeat;
	color:black;
}

.btnPlay-over
{
	background: url(../assets/html/img/titleScreen/btnPlay-over.png) no-repeat;
}

/* Tournament Presentation Screen */
#tournamentPresentationScreen
{
	text-align: :center;
}

.blackBackground
{
	position: absolute;
	width:853px;
	height: 480px;
	background-color: black;
	opacity: 0.5;
}

#backWindow
{
	background: url(../assets/html/img/tournamentPresentation/background.png) center no-repeat;
	position: absolute;
	top:160px;
	left:160px;
	width:524px;
	height: 199px;
}

#backWindow
{
	margin:0;
	color:black;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-align: center;
	font-size:20px;
}

.p1 
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:20px;
	margin-top:20px !important;
	height:20px;
}

.p2
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	font-size:20px;
}

.p3
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size:18px;
	margin-top:20px !important;
}

.p4
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	font-size:18px;
	margin-top:20px !important;
}


.paragraph2
{
	margin:0 auto;
	width:70%;
}


#btnClose
{
	position: absolute;
	top:140px;
	left:595px;
	width:53px;
	height:49px;
}


.btnClose-off
{
	background: url(../assets/html/img/tournamentPresentation/btnClose-off.png) no-repeat;
}

.btnClose-on
{
	background: url(../assets/html/img/tournamentPresentation/btnClose-on.png) no-repeat;
}

.btnClose-over
{
	background: url(../assets/html/img/tournamentPresentation/btnClose-over.png) no-repeat;
}

/*   teamSelection  */

#teamSelectionScreen
{
	width:853px;
	height:480px;
	background: url(../assets/html/img/transformerSelection/bkg.jpg) no-repeat;
}

.screenTitle
{
	position: absolute;
	text-align: center;
	color:white;
	top :0px;
	width:853px;
}

.btnInformations
{
	position: absolute;
	top:20px;
	left:50px;
	width:72px;
	height:55px;
}

.btnSettings
{
	position: absolute;
	top:20px;
	left:739px;
	width:72px;
	height:55px;
}

#blockContainer
{
	position: absolute;
	left:75px;
	width: 750px;
	height: 300px;
	top:100px;
}

.transformerContainer
{
	display: inline-block;
	position: relative;
	width: 155px;
	height: 167px;
	margin:10px;
}

.transformerSelected
{
	position: absolute;
	left:-12px;
	top:-15px;
	opacity: 0;
	width: 162px;
	height: 189px;
	background: url(../assets/html/img/transformerSelection/teamSelected.png) no-repeat;
}

.transformerBackground
{
	position: absolute;
	width: 137px;
	height: 164px;
	background: url(../assets/html/img/transformerSelection/box-bleu-3.png) no-repeat;
}

.transformerImage
{
	position: absolute;
	top:22px;
	left:-6px;
	width: 134px;
	height: 135px;
}

.numberBackground
{
	text-align: center;
	position: absolute;
	top:-15px;
	left:43px;
	width: 50px;
	height: 61px;
	background: url(../assets/html/img/transformerSelection/topLogo.png) no-repeat;
}

.number
{
	display: inline-block;
	color:black !important;
	font-family: 'Titillium Web', sans-serif !important;
	font-weight: 900 !important;
	font-size:28px;
	margin-top:4px;
}

.leftTransformerLogo
{
	position: absolute;
	top:90px;
	left:-10px;
	width: 51px;
	height: 63px;
	background: url(../assets/html/img/transformerSelection/box-bleu-1.png) no-repeat;
}

.miniconImage
{
	position: absolute;
	top:90px;
	left:88px;
	width: 65px;
	height: 55px;
}

.miniconBackground
{
	position: absolute;
	top:90px;
	left:95px;
	width: 51px;
	height: 63px;
	background: url(../assets/html/img/transformerSelection/box-bleu-2.png) no-repeat;
}

.btnInformations-off
{
	background: url(../assets/html/img/btnInformations-off.png) no-repeat;
}

.btnInformations-on
{
	background: url(../assets/html/img/btnInformations-on.png) no-repeat;
}

.btnInformations-over
{
	background: url(../assets/html/img/btnInformations-over.png) no-repeat;
}

.btnSettings-off
{
	background: url(../assets/html/img/btnSettings-off.png) no-repeat;
}

.btnSettings-on
{
	background: url(../assets/html/img/btnSettings-on.png) no-repeat;
}

.btnSettings-over
{
	background: url(../assets/html/img/btnSettings-over.png) no-repeat;
}

/* Versus Screen */
.defaultScreenTitleFont
{
	margin:0;
	color:white;
	text-transform: uppercase;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-align: center;
}

#versusScreen
{
	width: 853px;
	height:480px;
	overflow: hidden;
	background: url(../assets/html/img/versusScreen/bkg.jpg) no-repeat;
}

#btnHome
{
	position: absolute;
	top:20px;
	left:50px;
	width:72px;
	height:55px;
}

#versusScreenTitle
{
	position: absolute;
	width: 70%;
	top: 18px;
	left: 15.5%;
	text-align: center;
	color: white;
	font-size: 27px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 30px;
}


#btnStart
{
	font-size: 22px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	color:black;
	text-transform: uppercase;
}

.titleDescription
{
	min-height: 32px;
	font-size: 21px;

	text-transform: uppercase;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	color:white;
}

.points
{
	text-align: center;
	font-size: 24px;
}

.teamId
{
	position: absolute;
	top:100px;
	color:black;
}

#teamYou
{
	top:48px;
	left:206px;
}

#teamOpponent
{
	top:48px;
	left:-14px;
}

.titleTransformerName
{
	font-size: 21px;
	line-height: 21px;
}


.titleMiniconName
{
	font-size: 14px;

}

.btnNextTeam
{
	position: absolute;
	width: 48px;
	height: 77px;
}

.btnPreviousTeam
{
	position: absolute;
	width: 48px;
	height: 77px;
}

.statsBar
{
	position: absolute;
	width:11px;
	height:70px;
}

#playerBar1
{
	left:20px;
	top:-9px;
}

#playerBar2
{
	left:45px;
	top:-9px;
}

#playerBar3
{
	left:70px;
	top:-9px;
}

#opponentBar1
{
	left:238px;
	top:-9px;
}

#opponentBar2
{
	left:263px;
	top:-9px;
}

#opponentBar3
{
	left:288px;
	top:-9px;
}

#playerMiniconBar1
{
	left:46px;
	top:130px;
}

#playerMiniconBar2
{
	left:67px;
	top:130px;
}

#playerMiniconBar3
{
	left:88px;
	top:130px;
}

#opponentMiniconBar1
{
	left:220px;
	top:130px;
}

#opponentMiniconBar2
{
	left:241px;
	top:130px;
}

#opponentMiniconBar3
{
	left:262px;
	top:130px;
}

#btnPreviousMatchup
{
	top:250px;
	left:27px;
}

#btnNextMatchup
{
	top:250px;
	right:27px;
}

#btnSelectRight
{
	top:400px;
	left:50px;
}

#btnSelectLeft
{
	top:400px;
	right:50px;
}

.btnSelectText
{
	margin-top:5px;
}

.bar
{
	opacity: 0;
	margin:1px 0;
}

.statsContainer
{
	position: absolute;
	top:120px;
	left:250px;
}

#btnMiniconStatsYou
{
	position: absolute;
	width: 80px;
	height: 100px;
	left: 280px;
	top: 230px;
}

#btnMiniconStatsOpponent
{
	position: absolute;
	width: 80px;
	height: 100px;
	left: -160px;
	top: 230px;
}

#btnTransformerStatsYou
{
	position: absolute;
	width: 100px;
	height: 140px;
	top: 80px;
	left: 250px;
}

#btnTransformerStatsOpponent
{
	position: absolute;
	width: 100px;
	height: 140px;
	top: 80px;
	left: -145px;
}


.btnSelect
{
	position: absolute;
	width: 181px;
	height: 55px;
}

.btnSelect div:active
{
	color:black;
}

.bigBarRedEdge
{
	background: url(../assets/html/img/versusScreen/energy-bigbar-1.png) no-repeat;
	width:11px;
	height: 5px;
}

.bigBarRed
{
	background: url(../assets/html/img/versusScreen/energy-bigbar-2.png) no-repeat;
	width:11px;
	height: 4px;
}

.bigBarYellow
{
	background: url(../assets/html/img/versusScreen/energy-bigbar-4.png) no-repeat;
	width:11px;
	height: 4px;
}

.bigBarGreen
{
	background: url(../assets/html/img/versusScreen/energy-bigbar-7.png) no-repeat;
	width:11px;
	height: 4px;
}

.bigBarGreenEdge
{
	background: url(../assets/html/img/versusScreen/energy-bigbar-9.png) no-repeat;
	width:11px;
	height: 4px;
}

.smallBarRedEdge
{
	background: url(../assets/html/img/versusScreen/energy-littlebar-1.png) no-repeat;
	width:9px;
	height: 4px;
}

.smallBarRed
{
	background: url(../assets/html/img/versusScreen/energy-littlebar-2.png) no-repeat;
	width:9px;
	height: 3px;
}

.smallBarYellow
{
	background: url(../assets/html/img/versusScreen/energy-littlebar-4.png) no-repeat;
	width:9px;
	height: 3px;
}

.smallBarGreen
{
	background: url(../assets/html/img/versusScreen/energy-littlebar-7.png) no-repeat;
	width:9px;
	height: 3px;
}

.smallBarGreenEdge
{
	background: url(../assets/html/img/versusScreen/energy-littlebar-9.png) no-repeat;
	width:9px;
	height: 4px;
}

.btnSelect-off
{
	background: url(../assets/html/img/versusScreen/btn-select-off.png) no-repeat;
}

.btnSelect-on
{
	background: url(../assets/html/img/versusScreen/btn-select-on.png) no-repeat;
}

.btnSelect-over
{
	background: url(../assets/html/img/versusScreen/btn-select-over.png) no-repeat;
}

#you_btn_container
{
	position: absolute;
	width: 170px;
	height: 80px;
	top: 295px;
	left: 30px;
}

#btnNextTeamYou
{
	top:15px;
	left:120px;
}

#btnPreviousTeamYou
{
	top:0px;
	left:0px;
}

#opponent_btn_container
{
	position: absolute;
	width: 170px;
	height: 80px;
	top: 295px;
	left: 30px;
}

#btnNextTeamOpponent
{
	top:0px;
	left:120px;
}

#btnPreviousTeamOpponent
{
	top:15px;
	left:0px;
}

.imgContainer
{
	display: inline-block;
	position: relative;
	height: 100%;
	width: 100%;
}

#leftImageMinicon
{
	position: absolute;
	top: 77px;
	left: 55px;
}

.playerImageMinicon
{
	width:223px;
	height:166px;
	background: url(../assets/html/img/versusScreen/miniconLeft.png) no-repeat;
}

#leftImageTransformer
{
	position: absolute;
	top: 2px;
	left: -17px;
}


.playerImageTransformer
{
	width:260px;
	height:236px;
	background: url(../assets/html/img/versusScreen/transformerLeft.png) no-repeat;
}

#rightImageMinicon
{
	position: absolute;
	top: 77px;
	left: -70px;
}

.opponentImageMinicon
{
	width:223px;
	height:166px;
	background: url(../assets/html/img/versusScreen/miniconRight.png) no-repeat;
}

#rightImageTransformer
{
	position: absolute;
	top: 2px;
	left: -25px;
}

.opponentImageTransformer
{
	width:248px;
	height:230px;
	background: url(../assets/html/img/versusScreen/transformerRight.png) no-repeat;
}

#players
{
	display:inline-block;
}

#playerContainer
{
	position: absolute;
	top:80px;
	left:17px;
}

#opponentContainer
{
	position: absolute;
	top:80px;
	left:630px;
}

.playerContainer
{
	display:inline-block;
	position: relative;
	width:205px;
	height:400px;
}

.btnHome-off
{
	background: url(../assets/html/img/btnHome-off.png) no-repeat;
}

.btnHome-on
{
	background: url(../assets/html/img/btnHome-on.png) no-repeat;
}

.btnHome-over
{
	background: url(../assets/html/img/btnHome-over.png) no-repeat;
}

.btnNextTeam-off
{
	background: url(../assets/html/img/versusScreen/btnNextTeam-off.png) no-repeat;
}

.btnNextTeam-on
{
	background: url(../assets/html/img/versusScreen/btnNextTeam-over.png) no-repeat;
}

.btnNextTeam-over
{
	background: url(../assets/html/img/versusScreen/btnNextTeam-over.png) no-repeat;
}

.btnPreviousTeam-off
{
	background: url(../assets/html/img/versusScreen/btnPreviousTeam-off.png) no-repeat;
}

.btnPreviousTeam-on
{
	background: url(../assets/html/img/versusScreen/btnPreviousTeam-over.png) no-repeat;
}

.btnPreviousTeam-over
{
	background: url(../assets/html/img/versusScreen/btnPreviousTeam-over.png) no-repeat;
}


/* Place minicon screen Style */
#placeMiniconScreen
{
	width: 853px;
	height: 480px;
	overflow: hidden;
}

#placeMiniconBanner
{
	position: absolute;
	top: 240px;
	left: 0px;
	width: 440px;
	height: 109px;
	background: url(../assets/html/img/placeMiniconScreen/box-yellow.png) no-repeat;
}

#placeMiniconBannerText
{
	position: absolute;
	top: 36px;
	left: 21px;
	width: 92%;
	line-height: 20px;
	text-align: center;
	font-family: 'Titillium Web', sans-serif;
 	font-size:20px;
 	color:black;
	display:inline-block;
	vertical-align: middle;
}

#dropZone
{
	position: absolute;
	top: 60px;
	left: 0px;
	width: 251px;
	height: 371px;
	background: url(../assets/html/img/placeMiniconScreen/drop-zone.png) no-repeat;
}

/* END Place minicon screen Style */

/* Time Is Up Screen Style */
#timeIsUpScreen
{
	width: 853px;
	height: 480px;
	overflow: hidden;
}

#timeIsUpContainer
{
	position: absolute;
	top: -150px;
	left: 272px;
	width: 309px;
	height: 173px;
	background: url(../assets/html/img/timeIsUpScreen/times-up.png) no-repeat;
}

#timeIsUpText
{
	position: absolute;
	text-align: center;
	width:309px;
	top: 100px;
	font-size: 35px;
}

#leftWinnerContainer
{
	position: absolute;
	top: -100px;
	left: 855px;
}

#rightWinnerContainer
{
	position: absolute;
	top: -100px;
	left: -355px;
}

.leftArrow
{
	width: 353px;
	height: 86px;
	background: url(../assets/html/img/timeIsUpScreen/leftArrow.png) no-repeat;
}

.rightArrow
{
	width: 353px;
	height: 86px;
	background: url(../assets/html/img/timeIsUpScreen/rightArrow.png) no-repeat;
}

.winnerText
{
	position: absolute;
	text-align: center;
	top: 15px;
	left: 35%;
	text-align: center;
	font-family: 'Titillium Web', sans-serif;
 	font-size:30px;
 	color:black;
}

/* END Time Is Up Screen Style */

/* Result Screen style */
#resultScreen
{
	width: 853px;
	height: 480px;
	overflow:hidden;
}

#resultScreenBackground
{
	position: absolute;
	left:-230px;
	top:0px;
	width: 1700px;
	height: 480px;
	background: url(../assets/html/img/resultScreen/bkg.jpg) no-repeat;
}

#resultScreenTitle
{
	display: block;
	position: absolute;
	width: 100%;
	top: 3%;
	left: -15px;
	text-align: center;
	color: white;
	font-size: 35px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}

#playerPointsResults
{
	position:absolute;
	width:200px;
	left: 520px;
	top:85px;
	color:#FFDA34
}

#subTotalPoints
{
	position:absolute;
	width:304px;
	line-height:75px;
	text-align: center;
	top:0px;
	font-size: 35px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	color:black;
}

#playerNames
{
	position:absolute;
	width:150px;
	left: 200px;
	top:135px;
}

.pointsBackground
{
	position: absolute;
	width: 213px;
	height: 19px;
	top:90px;
	background: url(../assets/html/img/boxScore.png) no-repeat;
}

#resultPlayerImgContainer
{
	position: absolute;
	top:195px;
	left:170px;
	width: 2px;
	height: 2px;
}

#resultPlayerImgTransformer
{
	position: absolute;
	top:13px;
	left:-25px;
}

#resultPlayerImgMinicon
{
	position: absolute;
	top:90px;
	left:60px;
}

#topButtons
{
	position: absolute;
	top:-55px;
}

#btnHomeResultScreen
{
	position: absolute;
	left:50px;
	width: 72px;
	height: 55px;
}

#btnSettingsResultScreen
{
	position: absolute;
	left: 739px;
	width: 72px;
	height: 55px;
}

#playerPointBackground
{
	left:514px;
}

#yellowBox
{
	position:absolute;
	width:304px;
	height:80px;
	top:175px;
	left:860px;
	background: url(../assets/html/img/resultScreen/yellowBox.png) no-repeat;
}

#opponentPointBackground
{
	left:554px;
	display: none;
}

#btnRematch
{
	position:absolute;
	top:480px;
	left:530px;
}

#btnChangeTeam
{
	position:absolute;
	top:680px;
	left:550px;
}

#resultOpponentContainer
{
	position: absolute;
	top: 85px;
	left: 880px;
}

#opponentsPoints
{
	position:absolute;
	width: 200px;
	left: 52px;
	top: 0px;
	color:#FFDA34
}

#opponentNames
{
	position:absolute;
	width: 200px;
	left: 52px;
	font-size: 30px;
	top: 50px;
}

#resultOpponentImgContainer
{
	position: absolute;
	top:115px;
	left:250px;
	width: 2px;
	height: 2px;
}

#resultOpponentImgTransformer
{
	position: absolute;
	width: 248px;
	height: 230px;
	top:13px;
	right:-37px;
}

#resultOpponentImgMinicon
{
	position: absolute;
	width: 223px;
	height: 166px;
	top:90px;
	right:60px;
}



.btnRematch
{	
	position: absolute;
	top:110px;
	left:35%;
	width: 265px;
 	height: 126px;
}

.btnRematch div
{
	position:absolute;
	width:100%;
	top:73px;
	text-align: center;
	line-height: 32px;
 	font-size:30px;
	display:inline-block;
}

.btnRematch div:active
{
	color:black !important;
}

.btnRematch-off
{
	background: url(../assets/html/img/resultScreen/btnRematch-off.png) no-repeat;
}

.btnRematch-on
{
	background: url(../assets/html/img/resultScreen/btnRematch-on.png) no-repeat;
	color:black;
}

.btnRematch-over
{
	background: url(../assets/html/img/resultScreen/btnRematch-over.png) no-repeat;
}

.btnChangeTeam
{	
	position: absolute;
	top: 290px;
	left: 37%;
	width: 228px;
 	height: 109px;
}

.btnChangeTeam div
{
	position:absolute;
	top: 31px;
	left: 55px;
	width: 52%;
	line-height: 22px;
	text-align: center;
 	font-size: 20px;
	display: inline-block;
}

.btnChangeTeam div:active
{
	color: black !important;
}

.btnChangeTeam-off
{
	background: url(../assets/html/img/resultScreen/btnChangeTeam-off.png) no-repeat;
}

.btnChangeTeam-on
{
	background: url(../assets/html/img/resultScreen/btnChangeTeam-on.png) no-repeat;
	color: black;
}

.btnChangeTeam-over
{
	background: url(../assets/html/img/resultScreen/btnChangeTeam-over.png) no-repeat;
}

/* END Result Screen style */

/* Settings Screen */
#settingsScreen 
{ 
	width: 853px; 
	height: 480px; 
	overflow: hidden;
}

/* Pause screen style */
#pauseScreen 
{ 
	width: 853px; 
	height: 480px;
	overflow: hidden;
}

#btn_pause 
{ 
	width: 150px; 
	height: 50px;
}

.pauseBackground
{
	width: 737px;
	height: 435px;
	background: url(../assets/html/img/pauseScreen/frame.png) no-repeat;
	position: relative;
  	top: 20px;
	margin:0 auto;
}

#btnQuit
{
	position: absolute;
	top:395px;
	left:140px;
	width: 279px;
	height: 80px;
}

#btnRestart
{
	position: absolute;
	top:395px;
	left:435px;
	width: 279px;
	height: 80px;
}

#btnResume
{
	position: absolute;
	top:30px;
	left:700px;
	width:53px;
	height:49px;
}

.btnMusicPause
{
	position: absolute;
	width: 95px;
	height: 81px;
}

.btnEffectsPause
{
	position: absolute;
	width: 95px;
	height: 81px;
}


#musicContainer
{
	position: absolute;
	top:150px;
	left:450px;
	width: 250px;
	height: 200px;	
}

#soundOptions
{
	font-size:30px;
	margin-bottom:20px;
}

.pauseMenuButtonContainer
{
	display: inline-block;
	position: absolute;
	width: 125px;
	height: 150px;
}


#musicButtonContainer
{
	left:10px;
}

#sfxButtonContainer
{
	left:140px;
}

.bottomPauseButton div:active
{
	color:black !important;
}

#txtRestart
{
	height: 100%;
	line-height: 70px;
	vertical-align: middle;
	margin-left:-25px;
}

#txtQuitGame
{
	height: 100%;
	line-height: 70px;
	vertical-align: middle;
}

.pauseMenuText
{
	position: absolute;
	top:90px;
	width: 95px;
}

#pauseImage
{
	position: absolute;
	top:145px;
	left:65px;
	width: 372px;
	height: 304px;
	background: url(../assets/html/img/pauseScreen/robot.png) no-repeat;
}

.thumbnailButton
{
	position: absolute;
	top:30px;
	height:55px;
	width: 210px;
}

#btnHowToPlay div:active
{
	font-size:25px;
}

#btnHowToPlay
{
	top:40px;
	left:365px;
}

#btnPauseMenu
{
	left:120px;
}

.btnQuit-off
{
	background: url(../assets/html/img/pauseScreen/btnQuit-off.png) no-repeat;
}

.btnQuit-on
{
	background: url(../assets/html/img/pauseScreen/btnQuit-on.png) no-repeat;
}

.btnQuit-over
{
	background: url(../assets/html/img/pauseScreen/btnQuit-over.png) no-repeat;
}

.btnRestart-off
{
	background: url(../assets/html/img/pauseScreen/btnRestart-off.png) no-repeat;
}

.btnRestart-on
{
	background: url(../assets/html/img/pauseScreen/btnRestart-on.png) no-repeat;
	color:black;
}

.btnRestart-over
{
	background: url(../assets/html/img/pauseScreen/btnRestart-over.png) no-repeat;
}

.btnEffects-off
{
	background: url(../assets/html/img/pauseScreen/btnEffects-off.png) no-repeat;
}

.btnEffects-on
{
	background: url(../assets/html/img/pauseScreen/btnEffects-on.png) no-repeat;
}

.btnEffects-over
{
	background: url(../assets/html/img/pauseScreen/btnEffects-over.png) no-repeat;
}

.btnEffectsMuted-off
{
	background: url(../assets/html/img/pauseScreen/btnEffectsMuted-off.png) no-repeat;
}

.btnEffectsMuted-on
{
	background: url(../assets/html/img/pauseScreen/btnEffectsMuted-on.png) no-repeat;
}

.btnEffectsMuted-over
{
	background: url(../assets/html/img/pauseScreen/btnEffectsMuted-over.png) no-repeat;
}

.btnMusic-off
{
	background: url(../assets/html/img/pauseScreen/btnMusic-off.png) no-repeat;
}

.btnMusic-on
{
	background: url(../assets/html/img/pauseScreen/btnMusic-on.png) no-repeat;
}

.btnMusic-over
{
	background: url(../assets/html/img/pauseScreen/btnMusic-over.png) no-repeat;
}

.btnMusicMuted-off
{
	background: url(../assets/html/img/pauseScreen/btnMusicMuted-off.png) no-repeat;
}

.btnMusicMuted-on
{
	background: url(../assets/html/img/pauseScreen/btnMusicMuted-on.png) no-repeat;
}

.btnMusicMuted-over
{
	background: url(../assets/html/img/pauseScreen/btnMusicMuted-over.png) no-repeat;
}

/* How to play */

#howToPlayScreen 
{ 
	width: 853px; 
	height: 480px; 
	overflow: hidden;
}

#howToPlayBkg
{
	background: url(../assets/html/img/howToPlayScreen/frame.png) no-repeat;
}

#btnPauseMenuHowToScreen
{
	left:120px;
	top:40px;
}

#btnPauseMenuHowToScreen div:active
{
	font-size:25px;
}

#btnHowToPlayHowToScreen
{
	top:40px;
	left:365px;
}

.howToImage
{
	position: absolute;
	top:140px;
	left:195px;
	width: 440px;
	height: 250px;
	opacity: 0;
}

#dotContainer
{
	display: inline-block;
	position: absolute;
	width: 400px;
	height: 15px;
	top:400px;
	left:350px;
}

.tutoDotContainer
{
	display: inline-block;
	width:40px;
	height: 15px;
}

.tutoDotBackground
{
	position: absolute;
	width:40px;
	height: 15px;
	background: url(../assets/html/img/howToPlayScreen/dot-off.png) no-repeat;
}

.tutoDot
{
	position: absolute;
	width:37px;
	height: 13px;
	background: url(../assets/html/img/howToPlayScreen/dot-on.png) no-repeat;
}

.tutoArrow
{
	position: absolute;
	width:64px;
	height:100px;
}

#btnNextTuto
{
	top:200px;
	left:750px;
}

#btnPreviousTuto
{
	top:200px;
	left:40px;
}

.tutoText
{
	text-align: left;
	line-height: 100%;
	width:260px;
	height:50px;
	top:325px;
	font-size:20px;
	font-weight: 700;
}

#txtTutoTitle
{
	position: absolute;
	left:140px;
}

#txtTutoDescription
{
	position: absolute;
	left:450px;
}

#howToImage1
{
	background: url(../assets/html/img/howToPlayScreen/tutoImg1.png) no-repeat;
}

#howToImage2
{
	left:280px;
	background: url(../assets/html/img/howToPlayScreen/tutoImg2.png) no-repeat;
}

#howToImage3
{
	background: url(../assets/html/img/howToPlayScreen/tutoImg3.png) no-repeat;
}

.btnNextTuto-off
{
	background: url(../assets/html/img/howToPlayScreen/arrowRight-off.png)  no-repeat;
}

.btnNextTuto-on
{
	background: url(../assets/html/img/howToPlayScreen/arrowRight-on.png)  no-repeat;
}

.btnNextTuto-over
{
	background: url(../assets/html/img/howToPlayScreen/arrowRight-off.png)  no-repeat;
}

.btnPreviousTuto-off
{
	background: url(../assets/html/img/howToPlayScreen/arrowLeft-off.png)  no-repeat;
}

.btnPreviousTuto-on
{
	background: url(../assets/html/img/howToPlayScreen/arrowLeft-on.png)  no-repeat;
}

.btnPreviousTuto-over
{
	background: url(../assets/html/img/howToPlayScreen/arrowLeft-off.png)  no-repeat;
}

/* Tournament Screen */
#tournamentScreen
{
	width: 853px;
	height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/tournamentScreen/bkg.jpg)  no-repeat;
}

#screenContainer
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 853px;
	height: 480px;
	overflow: hidden;
}

#tournamentTitle
{
	font-size:35px;
	vertical-align: middle;
	line-height: 90px;
	height: 90px;
}

#backgroundGraphic
{
	position: absolute;
	left:100px;
	top:100px;
	width: 651px;
	height: 314px;
	background: url(../assets/html/img/tournamentScreen/backgroundGraphic.png)  no-repeat;
}

#tournamentLines
{
	position: absolute;
	left:179px;
	top:120px;
	width: 494px;
	height: 234px;
	background: url(../assets/html/img/tournamentScreen/line.png)  no-repeat;
}

#selection1
{
	position: absolute;
	left:377px;
	top:95px;
	width: 96px;
	height: 112px;
	background: url(../assets/html/img/tournamentScreen/selection-1.png)  no-repeat;
}

#selection2
{
	position: absolute;
	left:338px;
	top:207px;
	width: 172px;
	height: 78px;
	background: url(../assets/html/img/tournamentScreen/selection-2.png)  no-repeat;
}

#selection3
{
	position: absolute;
	left:176px;
	top:258px;
	width: 499px;
	height: 78px;
	background: url(../assets/html/img/tournamentScreen/selection-3.png)  no-repeat;
}

#selection4
{
	position: absolute;
	left:93px;
	top:339px;
	width: 667px;
	height: 78px;
	background: url(../assets/html/img/tournamentScreen/selection-4.png)  no-repeat;
}

.transformerBgTournamentScreen
{
	display:inline-block;
	position: relative;
	width:57px;
	height: 67px;
	background: url(../assets/html/img/tournamentScreen/box-bleu-3.png)  no-repeat;
}

.transformerImgTournamentScreen
{
	display:inline-block;
	position: absolute;
	top:12px;
	left:-2px;
	width:57px;
	height: 49px;
}

.transformerTypeTournamentScreen
{
	position: absolute;
	left:-4px;
	top:38px;
	width: 45px;
	height: 46px;
	background: url(../assets/html/img/tournamentScreen/box-bleu-2.png)  no-repeat;
}

.miniconIconTournamentScreen
{
	position: absolute;
	left:40px;
	top:38px;
	width: 22px;
	height: 27px;
	background: url(../assets/html/img/tournamentScreen/box-bleu-1.png)  no-repeat;
}

.miniconImgTournamentScreen
{
	position: absolute;
	left:40px;
	top:42px;
	width: 22px;
	height: 27px;
	background:none;
}

.tournamentRow
{
	position: relative;
}

#transformerRow1
{
	top:30px;
}

#transformerRow2
{
	top:52px;
}

#transformerRow3
{
	top:31px;
}

#transformerRow4
{
	top:40px;
}

#tourTransformer1
{
	left:395px;
}

#tourTransformer2
{
	left:362px;
}

#tourTransformer3
{
	left:367px;
}

#tourTransformer4
{
	left:200px;
}

#tourTransformer5
{
	left:205px;
}

#tourTransformer6
{
	left:400px;
}

#tourTransformer7
{
	left:405px;
}

#tourTransformer8
{
	left:120px;
}

#tourTransformer9
{
	left:125px;
}

#tourTransformer10
{
	left:155px;
}

#tourTransformer11
{
	left:160px;
}

#tourTransformer12
{
	left:190px;
}

#tourTransformer13
{
	left:195px;
}

#tourTransformer14
{
	left:230px;
}

#tourTransformer15
{
	left:235px;
}

/* TransformerStatsScreen */

#tournamentSelectionScreen 
{ 
	width: 853px; 
	height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/tournamentSelectionScreen/bkg.jpg) no-repeat;
}

.btnClosePopup
{
	left:740px !important;
	top:35px !important;
}

/* MiniconStatsScreen */

#transformerStatsScreen 
{ 
	width: 853px; 
	height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/popup/popUp-transformer.png) no-repeat;
}

/* Tournament Selection Screen */
#miniconStatsScreen 
{ 
	width: 853px; 
	height: 480px;
	overflow: hidden;
	background: url(../assets/html/img/popup/popUp-minicon.png) no-repeat;
}

#tournamentProgress
{
	position: absolute;
	top:107px;
	width: 100%;
	height: 75px;
}

#quaterFinalsBackground
{
	position: absolute;
	width:285px;
	left:22px;
	height: 75px;
	background: url(../assets/html/img/tournamentSelectionScreen/whiteBox1-on.png) no-repeat;
}

#semiFinalsBackground
{
	position: absolute;
	width:268px;
	left:300px;
	height: 75px;
	background: url(../assets/html/img/tournamentSelectionScreen/whiteBox2-off.png) no-repeat;
}

#finalsBackground
{
	position: absolute;
	left:560px;
	width:268px;
	height: 75px;
	background: url(../assets/html/img/tournamentSelectionScreen/whiteBox2-off.png) no-repeat;
}

.title1
{
	color:black;
	margin-top:10px;
	font-size:18px;
	line-height: 18px;
	width: 285px;
    top: 0px;
    position: absolute;
    text-align: center;
}

.title2
{
	color:black;
	margin: 2.5px 0;
	font-size:19px;
	line-height: 19px;
	width: 285px;
    top: 25px;
    position: absolute;
    text-align: center;
}

.title3
{
	color:black;
	line-height: 18px;
	width: 285px;
    top: 50px;
    position: absolute;
    text-align: center;
}

#matchupTitleContainer
{
	position: absolute;
	top:204px;
	width: 100%;
	height: 43px;
}

#chooseMatchup
{
	margin: 0 auto;
	color:black;
	width: 405px;
	height: 43px;
	line-height: 40px;
	text-align: center;
	top:200px;
	left:17px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-white-small.png) no-repeat;
}

#matchupContainer1
{
	position: absolute;
	width: 814px;
	height: 97px;
	top:257px;
	left:17px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-white-1.png) no-repeat;
}

#matchupContainer2
{
	position: absolute;
	width: 412px;
	height: 97px;
	top:257px;
	left:220px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-white-2.png) no-repeat;
}

#matchupContainer3
{
	position: absolute;
	width: 210px;
	height: 97px;
	top:257px;
	left:320px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-white-3.png) no-repeat;
}

#transformerMatchup1
{
	left:4px;
}

#transformerMatchup5
{
	left:4px;
}

#transformerMatchup6
{
	left:6px;
}

#transformerMatchup7
{
	left:5px;
}

.transformerBg
{
	display:inline-block;
	position: relative;
	width:84px;
	height: 94px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-bleu-3.png)  no-repeat;
}

.transformerImg
{
	display:inline-block;
	position: absolute;
	top:2px;
	left:-2px;
	width:84px;
	height: 80px;
}

.transformerType
{
	position: absolute;
	left:-4px;
	top:38px;
	width: 28px;
	height: 33px;
	background: url(../assets/html/img/tournamentSelectionScreen/box-bleu-2.png)  no-repeat;
}

.miniconIcon
{
	position: absolute;
	left:57px;
	top:38px;
	width: 28px;
	height: 33px;
	background: url(../assets/html/img/tournamentScreen/box-bleu-1.png)  no-repeat;
}

.miniconImg
{
	position: absolute;
	left:55px;
	top:44px;
	width: 28px;
	height: 23px;
	background:none;
}

.TitiliumWebBold
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
}

.versusBackground
{
	display: inline-block;
	background: url(../assets/html/img/tournamentSelectionScreen/red-box.png) no-repeat;
	width:198px;
	height: 88px;
	top:4px;
}

.leftTransformer
{
	position: absolute;
	left:15px;
}

.rightTransformer
{
	position: absolute;
	top:0px;
	left:100px;
}

.energyBar
{
	position: absolute;
	background: url(../assets/html/img/tournamentSelectionScreen/energyBar.png) no-repeat;
	width:27px;
	height: 59px;
	left:28px;
	top:70px;
}

.energyBar1
{
	position: absolute;
	background: url(../assets/html/img/tournamentSelectionScreen/energy.png) no-repeat;
	width:15px;
	height: 11px;
	left:6px;
	top:6px;
}

.energyBar2
{
	position: absolute;
	background: url(../assets/html/img/tournamentSelectionScreen/energy.png) no-repeat;
	width:15px;
	height: 11px;
	left:6px;
	top:20px;
}

.energyBar3
{
	position: absolute;
	background: url(../assets/html/img/tournamentSelectionScreen/energy.png) no-repeat;
	width:15px;
	height: 11px;
	left:6px;
	top:35px;
}

.horizontalBox
{
	position: absolute;
	background: url(../assets/html/img/tournamentSelectionScreen/horizontalBox.png) no-repeat;
	width:116px;
	height: 22px;
	left:-15px;
	top:125px;
	line-height: 22px;
	font-size:16px;
}

.matchupContainer
{
	position: absolute;
	top:261px;
	left:18px;
}

/* Game Hud Style */
#gameHud { 
	width: 853px; 
}

.floatingPoints
{
	position: absolute;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 20px;
	font-size: 20px;
	color:white;
	text-align:center;
	width: 200px; text-shadow: 0px 0px 6px #000,0px 0px 6px #000;
    -webkit-transform: translate(-105px,0px);
    -ms-transform: translate(-105px,0px);
    transform: translate(-105px,0px);
}

#btnPause
{
	position: absolute;
	top:40px;
	left:50px;
	width:100px;
	height:100px;
}

.score
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	font-size: 53px;
	color:black;
	text-align:center;
}

#rightScore
{
	position:absolute;
	top:20px;
	width: 30%;
	left:435px;
}


#leftScore
{
	position:absolute;
	top:20px;
	left:95px;
	width: 30%;
}

#leftScoreBonus
{
	position: absolute;
	font-size: 30px;
	left:285px;
	top:205px;
}

#rightScoreBonus
{
	position: absolute;
	font-size: 30px;
	left:380px;
	top:205px;
}

#beginCountdown { position: absolute; top: 240px; left: 427px; font-size: 10rem; font-weight: 800; text-align: center; font-family: "Titillium Web"; color: #FFF; margin: 0;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.btnPause-off
{
	background: url(../assets/html/img/pause_off.png) no-repeat;
}

.btnPause-on
{
	background: url(../assets/html/img/pause_click.png) no-repeat;
}

.btnPause-over
{
	background: url(../assets/html/img/pause_over.png) no-repeat;
}

/* Side Selection */

#sideSelection
{
	width:853px;
	height: 480px;
	display:inline-block;
}

#bannerText
{
	color:white;
	font-size:18px;
	line-height: 73px;
	vertical-align: middle;
}

#topBanner
{
	text-align: center;
	position: absolute;
	background: url(../assets/html/img/sideSelection/banner.png) no-repeat center;
	margin:auto;
	left:260px;
	width:264px;
	height: 73px;
	top:205px;
}

#leftSide
{
	position: absolute;
	width: 360px;
	height: 480px;
}

#rightSide
{
	position: absolute;
	left:390px;
	width: 425px;
	height: 480px;
}

.sideText
{
    position: absolute;
	top:45%;
	font-size: 28px;
	color:black;
    width: 100%;
}

.btnPolygon-off
{
	background: url(../assets/html/img/sideSelection/polygonYou-off.png) no-repeat center;
}

.btnPolygon-on
{
	background: url(../assets/html/img/sideSelection/polygonYou-click.png) no-repeat center;
}

.btnPolygon-over
{
	background: url(../assets/html/img/sideSelection/polygonYou-off.png) no-repeat center;
}

/* Winner Screen */

/*#winnerP1
{
	color:black;
}

#winnerP2
{
	color:black;
}

#winnerP3
{
	color:black;
}*/

#winnerP4
{
    left: 150px;
    position: absolute;
    top: 15px;
    width: 300px;
}

#winnerTransformerContainer
{
    top: 30px;
    width: 200px;
    left: 0px;
    /* float: left; */
    position: absolute;
}

#winnerTitleContainer
{
	margin-top:5px;
	width:375px;
	margin-left:55px;
}

#winnerScreenText
{
	color:black;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	text-align: center;
}

#winnerContentContainer
{
	width:520px;
}