/* Open Sans Font */
@import url(../../../../../../../fonts.googleapis.com/css¿family=Titillium+Web_400,700&subset=latin,latin-ext.css);

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


/* Title screen style */
#titleScreen 
{ 
	width: 853px; 
	height: 480px; 

}

#titleScreenBackground
{
	width: 853px; 
	height: 480px;
}

.gameLogo
{
	width: 338px;
	height: 70px;
	margin: 10px auto;
}

#titleContainer
{
	position: absolute;
	top: 60px;
	left: 0px;
	width: 100%;
	text-align: center;
}

#titleTitle
{
	font-size:50px;
	margin-bottom:20px;
}

.splashScreenLogo
{
	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;
}

#playButtonContainer
{
	position: absolute;
	top: 254px;
	left: 555px;
}

#txtBtnPlay
{
	height: 100%;
	line-height: 60px;
	vertical-align: middle;
}


/* CHARACTER SELECTION SCREEN */
#characterSelectionScreen
{
	width:853px;
	height:480px;
}

#logoCharacterSelectionScreen
{
	position: absolute;
	top: 25px;
	left: 320px;
}

#chooseBotContainer
{
	position: absolute;
	top: 6px;
	width: 345px;
}

#chooseBotText
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:19px;
	font-weight: 700;
	text-transform:uppercase;
	text-align: center;	
}

#chooseTitanContainer
{
	position: absolute;
	top: 6px;
	right: 0;
	width: 336px;
}

#chooseTitanText
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:19px;
	font-weight: 700;
	text-transform:uppercase;
	text-align: center;	
}

#leftSideSelection
{
	position: absolute;
	top: 95px;
	left: 30px;
}

#chooseIcon
{
	position: absolute;
	top: 80px;
	left: 340px;
}

#rightSideSelection
{
	position: absolute;
	top: 95px;
	left: 427px;
}

#characterLeftSection
{
	position: absolute;
	top: 165px;
	left: 20px;
}

.botOneContainer, .boxBodyAstrotrain, #botOne, #botOneSelected, .boxBodySkullcruncher, #botTwo, #botTwoSelected, 
.boxBodyHighbrow, #botThree, #botThreeSelected, .boxBodyPowermaster, #botFour, #botFourSelected
{
	position: absolute;
	top: 0;
	left: 0;
}

.botTwoContainer
{
	position: absolute;
	top: 155px;
	left: 0;
}

.botThreeContainer
{
	position: absolute;
	top: 0;
	left: 200px;
}

.botFourContainer
{
	position: absolute;
	top: 155px;
	left: 200px;
}

#characterRightSection
{
	position: absolute;
	top: 165px;
	left: 450px;
}

.masterOneContainer,.boxHeadAstrotrain, #masterOne, #masterOneSelected, .boxHeadSkullcruncher, #masterTwo, #masterTwoSelected, 
.boxHeadHighbrow, #masterThree, #masterThreeSelected, .boxHeadPowermaster, #masterFour, #masterFourSelected
{
	position: absolute;
	top: 0;
	left: 0;
}

.masterTwoContainer
{
	position: absolute;
	top: 155px;
	left: 0;
}

.masterThreeContainer
{
	position: absolute;
	top: 0;
	left: 200px;
}

.masterFourContainer
{
	position: absolute;
	top: 155px;
	left: 200px;
}

/** END CHARACTER SELECTION SCREEN **/

/**   BOTH SELECTED SCREEN **/
#bothSelectedScreen
{
	width:853px;
	height:480px;
}

#bothIcon
{
	position: absolute;
	top: 70px;
	left: 340px;
}

#bothLeftSection
{
	position: absolute;
	top: 90px;
	left: 0px;
	width:315px;
	height:388px;
}

#btnInfoRed
{
	position: absolute;
	top: 0;
	right: 20px;
	z-index: 130;
}

#bothMiddleSection
{
	position: absolute;
	top: 170px;
	left: 318px;
}

#pointBkg
{
	position: absolute;
	top: 0;
	left: 0;
}

#pointContainer
{
	color:#FFF;
	position: absolute;
	top: -12px;
	left: 0;
}

#boardStat
{
	position: absolute;
	top: 55px;
	left: 0;
}

#bothRightSection
{
	position: absolute;
	top: 90px;
	left: 555px;
	width:315px;
	height:388px;
}

#btnInfoBlue
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 130;
}

#btnleftSectionRight
{
	position: absolute;
	top: 155px;
	left: 0px;
}

#btnRightSectionRight
{
	position: absolute;
	top: 155px;
	right: 30px;	
}

#masterContainer
{
	
}

#uniteBotStrenghtStat
{
	position: absolute;
    top: 113px;
    left: 82px;
}

#uniteTitanStrenghtStat
{
	position: absolute;
    top: 113px;
    left: 82px;
}

#uniteBotSpeedStat
{
	position: absolute;
    top: 177px;
    left: 82px;
}

#uniteTitanSpeedStat
{
	position: absolute;
    top: 177px;
    left: 82px;
}

#uniteBotBrainStat
{
	position: absolute;
    top: 241px;
    left: 82px;
}

#uniteTitanBrainStat
{
	position: absolute;
    top: 241px;
    left: 82px;
}

#uniteBotFireblastStat
{
	position: absolute;
    top: 305px;
    left: 82px;
}

#uniteTitanFireblastStat
{
	position: absolute;
    top: 305px;
    left: 82px;
}



#btnUnite
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top: 380px;
	left: 285px;
	z-index:120;
}

#btnUnite:hover
{
	color: #C00933;
}

.UniteText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 125px;
}

.UniteText:active, #btnUnite:active
{
	color: #000000;
}


/* How to play OWL carousel */
#bothSelectedScreen div[data-btn-id="btnPreviousLeftSection"] {
	position: absolute;
	top: 155px;
	left: 30px;
	/*float: right;*/
	z-index:100;
}

#bothSelectedScreen div[data-btn-id="btnNextLeftSection"] {
	position: absolute;
	top: 155px;
	right: 20px;
	/*float: left;*/
	z-index:100;
}

#bothSelectedScreen div[data-btn-id="btnPreviousRightSection"] {
	position: absolute;
	top: 155px;
	left: 0;
	/*float: right;*/
	z-index:100;
}

#bothSelectedScreen div[data-btn-id="btnNextRightSection"] {
	position: absolute;
	top: 155px;
	right: 50px;
	/*float: left;*/
	z-index:100;
}

.infoBotBkg
{
	position: absolute;
	bottom: 15px;
	left: 31px;
}

.infoMasterBkg{
	position: absolute;
	bottom: 15px;
	right: 50px;
}

#leftSectionCarousel
{
	height:388px;
}

#leftSectionCarousel > div > div > div > div, #rightSectionCarousel > div > div > div > div
{
	z-index:0;
	position: relative;
}

#bothSelectedScreen .carousel-image {
    position: absolute;
}

#bothSelectedScreen .leftSection_slide1 .carousel-image
{
    left: 10px;
    top: 58px;
}

#bothSelectedScreen .leftSection_slide2 .carousel-image{
    left: 18px;
    top: 65px;
}

#bothSelectedScreen .leftSection_slide3 .carousel-image {
    left: 10px;
    top: 15px;
}

#bothSelectedScreen .leftSection_slide4 .carousel-image {
    left: 12px;
    top: 40px;
}

#bothSelectedScreen .rightSection_slide1 .carousel-image {
    left: 44px;
    top: 65px;
}

#bothSelectedScreen .rightSection_slide2 .carousel-image {
    left: 43px;
    top: 70px;
}

#bothSelectedScreen .rightSection_slide3 .carousel-image {
    left: 32px;
    top: 55px;
}

#bothSelectedScreen .rightSection_slide4 .carousel-image {
    left: 33px;
    top: 65px;
}

#leftSectionCarousel .owl-item .item, #rightSectionCarousel .owl-item .item
{
   height: 390px;
}

#leftSectionCarousel .owl-controls, #rightSectionCarousel .owl-controls {
    text-align: center;
    position: absolute;
    top: 288px;
    left: 0px;
    width: 629px;
}
.leftLogoContainer
{
	position: absolute;
	top: 318px;
	left: 4px;
}

.rightLogoContainer
{
	position: absolute;
	top: 318px;
	right: 24px;
}

.infoFirstLineLeft
{
	position: absolute;
	top: 318px;
	width:100%;
	text-align: center;
}

.infoFirstLineLeft > span
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:20px;
}

.infoSecondLineLeft
{
	position: absolute;
	top: 335px;
	width:100%;
	text-align: center;
}

.infoSecondLineLeft > span
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:22px;
}

.infoFirstLineRight
{
	position: absolute;
	top: 318px;
	width:265px;
	text-align: center;
}

.infoFirstLineRight > span
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:20px;
}

.infoSecondLineRight
{
	position: absolute;
	top: 335px;
	width:265px;
	text-align: center;
}

.infoSecondLineRight > span
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:22px;
}
/** END BOTH SELECTED SCREEEN **/


/** COMBINE ANIMATION SCREEEN **/
#combineAnimationScreen
{
	width:853px;
	height:480px;
}

#combineBackground
{
	position: absolute;
	width:893px;
	height:520px;	
}
#titanContainer
{
	position:absolute;
}

#botContainer
{
	position:absolute;
}

#fusionAnim
{
	background: url(../assets/html/img/flash.png) no-repeat;
	width: 512px;
	height: 512px;
	position:absolute;
}

#blackForeground
{
    background-color:#000000;
    position: absolute;
    top: 241px;
    left: 409px;
    width:40px;
    height:40px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}
/** END COMBINE ANIMATION SCREEEN **/

/*  SECTION MISC */
.btnClose
{
	position: absolute;
	top:140px;
	left:595px;
	width:53px;
	height:49px;
}

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

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

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

.btnSetting, .btnPauseHud
{
	position: absolute;
	top:10px;
	left:748px;
}

.btnBack
{
	position: absolute;
	top:10px;
	left:25px;
}

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

/*  END SECTION MISC */


/* Result Screen style */
#resultScreen
{
	width: 853px;
	height: 480px;
	z-index: 200;
}


.playerPointsResultsContainer
{
	width:100%;
	height:100%;
	text-align: center;
}

.playerPointsResults
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:32px;
	text-transform:uppercase;
	line-height:70px;
}

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

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

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

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

#btnSettingsResultScreen
{
	position: absolute;
	top:20px;
	left:750px;
}

#resultLeftSection
{
	position: absolute;
	top: 90px;
	left: 0;
	width:315px;
	height:388px;
}

#resultInfoBot, #resultInfoTitan
{
	text-align:center;
}

#resultClassBotText, .resultseparator, #resultFamilyBotText, #resultClassTitanText
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:20px;
	color: #FFFFFF;
	text-transform:uppercase;
}

#botName, #titanName
{
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:22px;
	line-height: 15px;
	text-transform:uppercase;
}

#btnLearnMoreLeft
{
	color: #FFFFFF;
	position: absolute;
	top: 290px;
	left: 25px;
}

#btnLearnMoreLeft:hover, #btnLearnMoreRight:hover
{
	color: #000000;
}

#learnMoreLeftText, #learnMoreRightText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-transform:uppercase;
	position: absolute;
	top: 20px;
}

#learnMoreLeftText
{
	left: 80px;
}

#learnMoreRightText
{
	right: 80px;
	text-align: right;
}

#learnMoreLeftText:active, #btnLearnMoreLeft:active, #learnMoreRightText:active, #btnLearnMoreRight:active
{
	color: #FFFFFF;
}

#resultRightSection
{
	position: absolute;
	top: 90px;
	right: 0;
	width:315px;
	height:388px;
}


#btnLearnMoreRight
{
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:20px;
	position: absolute;
	top:290px;
	right: 25px;
}


#playerPointBackground
{
	left:514px;
}

#resultBotSelected
{
	position:absolute;
	top: 60px;
	left: 0;
}

#resultTitanSelected
{
	position:absolute;
	top: 60px;
	left: 70px;
}

#resultMiddleSection
{
	position: absolute;
	top: 100px;
	left: 295px;
}

#boxScoreContainer
{
	width:258px;
	height:250px;
	overflow: hidden;
}

#boxScoreTop
{
	position: absolute;
	top: -3px;
}

#boxScoreBottom
{
	background: url(../assets/html/img/resultScreen/boxBottom.png) no-repeat;
	position: relative;
	top: -51px;
	color: #FFF;
	width:100%;
	height:100%;
	text-align: center;
}

/*#bonusScore, #finalScore
{
	
}*/
#resultScreen #scoreContainer
{
	position: absolute;
    top: 180px;
    left: 129px;
	width:300px;
	height:290px;
	text-align: center;
}

#finalScore
{
	position:absolute;
	top: 23px;
	width:inherit;
	color:#C00933;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:24px;
}

#bonusScore
{
	position:absolute;
	top: 47px;
	width:inherit;
	color:#C00933;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:24px;
}



#newHighScoreText
{
	position:absolute;
	top: 95px;
	width:inherit;
	color:#C00933;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:28px;
	line-height:35px;
}

#highScore
{
	position:absolute;
	top: 138px;
	width:inherit;
	color:#C00933;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:30px;
	line-height:35px;
}

#btnRestartResultScreen
{
	position: absolute;
	top:350px;
	left:285px;
}

#txtRestartContainer:hover
{
	color:#C00933;
}

#txtRestartContainer
{
	color: #FFF;
	width:100%;
	height:100%;
	text-align: center;
}

#txtRestart
{
	color:inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:32px;
	text-transform:uppercase;
	line-height:180px;
}

#txtRestart:active, #txtRestartContainer:active
{
	color:#000000;
}

#btnQuitResultScreen
{
	position: absolute;
	top:395px;
	left:315px;
	width: 200px;
	height: 60px;
}

/* END Result Screen style */

/* Settings Screen */
#settingsScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index: 499;
}

#btnOption, #optionSelected
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:10px;
	left:30px;	
}

#optionSelected
{
	left:32px;	
}

#btnOption:hover
{
	color: #000000;
}

.optionText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 70px;
}

.optionText:active, #btnOption:active
{
	color: #FFFFFF;
}

#btnHowToPlay, #howToPlaySelected
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:10px;
	left:388px;	
}

#howToPlaySelected
{
	left:390px;	
}

#btnHowToPlay:hover
{
	color: #000000;
}

.howToPlayBtnText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 70px;
}

.howToPlayBtnText:active, #btnHowToPlay:active
{
	color: #FFFFFF;
}

#settingsContainer, .howToPlayContainer
{
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	text-align: center;
}

#settingsTitle
{
	text-align:center;
	line-height:80px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 36px;
	letter-spacing:3px;
	text-transform:uppercase;
}

#musicButtonContainer
{
	position: absolute;
	top: 85px;
	left:270px;
}

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

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

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

#sfxButtonContainer
{
	position: absolute;
	top: 85px;
	right:267px;
}

#settingsBtnOk
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:267px;
	left:258px;	
	line-height: 70px;
}

#settingsBtnOk:hover
{
	color: #000000;
}

#settingsBtnOk:active
{
	color: #FFFFFF;
}

.okText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 38px;
	text-transform:uppercase;
    line-height: 102px;
}

#settingsScreen div[data-btn-id="btnHowToPlayPrevious"] {
	position: absolute;
	top: 135px;
	left: 20px;
	/*float: right;*/
	z-index:100;
}

#settingsScreen div[data-btn-id="btnHowToPlayNext"] {
	position: absolute;
	top: 135px;
	right: 20px;
	/*float: left;*/
	z-index:100;
}

#howToPlayCarousel
{
	position:absolute;
	top:-20px;
	left:0;
}

#howToPlayCarousel .owl-item .item, #howToPlayCarouselPause .owl-item .item
{
   height: 390px;
}

#howToPlayCarousel .owl-controls .owl-dot span, #howToPlayCarouselPause .owl-controls .owl-dot span
{
    display: block;
    width: 25px;
    height: 10px;
    margin: 5px 6px;
    background: #9e0b25;
}

#howToPlayCarousel .owl-controls .owl-dot, #howToPlayCarouselPause .owl-controls .owl-dot
{
    display: inline-block;
}

#howToPlayCarousel .owl-controls .owl-dot.active span, #howToPlayCarouselPause .owl-controls .owl-dot.active span
{
	background: white;
}

#howToPlayCarousel .owl-controls, #howToPlayCarouselPause .owl-controls
{
    text-align: center;
    position: absolute;
    top: 350px;
    left: 0px;
    width: 853px;
}

.howToPlayText span
{
	color: #FFFFFF;
}

.howToPlayText
{
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 24px;
    text-align: left;
	color: #FFFFFF;
    position: absolute;
    top: 87px;
    left: 438px;
	height: 275px;
	width: 275px;
	line-height: 30px;
}

#htp_slide_1
{
    position: absolute;
    top: 5px;
    left: 58px;
}

#htp_slide_2
{
    position: absolute;
    top: 5px;
    left: 58px;
}

#htp_slide_3
{
    position: absolute;
    top: 0;
    left: 0;
}

#htp_slide_4
{
    position: absolute;
    top: 20px;
    left: 35px;
}

/* SETTINGS SCREEN END */


/* Pause screen style */
#pauseScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index: 500;
}

#btnPause, #pauseSelected
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:10px;
	left:30px;	
}

#pauseSelected
{
	left:32px;	
}

#btnPause:hover
{
	color: #000000;
}

.pauseText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 70px;
}

.pauseText:active
{
	color: #FFFFFF;
}

#pauseContainer
{
	position: absolute;
	top: 100px;
	left: 0px;
	width: 100%;
	text-align: center;
}

#btnBackPause
{
	position: absolute;
	top:281px;
	left:168px;
}

#pauseBtnResume
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:267px;
	left:258px;	
	line-height: 70px;
}

#btnRestartPause
{
	position: absolute;
	top:281px;
	left:610px;
}

#pauseBtnResume:hover
{
	color: #000000;
}

#pauseBtnResume:active
{
	color: #FFFFFF;
}

#pauseScreen div[data-btn-id="btnHowToPlayPrevious"] {
	position: absolute;
	top: 135px;
	left: 20px;
	/*float: right;*/
	z-index:100;
}

#pauseScreen div[data-btn-id="btnHowToPlayNext"] {
	position: absolute;
	top: 135px;
	right: 20px;
	/*float: left;*/
	z-index:100;
}

#pauseTitle
{
	font-size:50px;
	margin-bottom:20px;
}

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

#btnSettingsLong
{
	position: absolute;
	top:215px;
	left:315px;
	width: 200px;
	height: 60px;
}

#btnRestart
{
	position: absolute;
	top:305px;
	left:315px;
	width: 200px;
	height: 60px;
}

#btnQuit
{
	position: absolute;
	top:395px;
	left:315px;
	width: 200px;
	height: 60px;
}


#txtQuitGame, #txtSettingsLong, #txtHowToPlay, #txtRestartLong
{
	height: 100%;
	line-height: 60px;
	vertical-align: middle;
}

.pauseMenuText
{
	position: absolute;
	top:90px;
	width: 95px;
	letter-spacing:2px;
}

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

#btnPauseMenu
{
	left:120px;
}


#btnResume
{
	position: absolute;
	top:10px;
	left:748px;
}

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

#meterContainer
{
	position: absolute;
	top:429px;
	left:204px;
}

#meterForeground
{
	z-index:2;
}

#meterForegroundTop
{
	z-index:4;
	position: absolute;
	top:12px;
	left:141px;
}

#meter
{
	background: url(../assets/html/img/meter.png);
	position: absolute;
	top:18px;
	left:71px;
	height:24px;
}

#meterBackground
{
	position: absolute;
	top: 26px;
	left: 71px;
	z-index:-2;
}

#countdownContainer
{
	position: absolute;
    top: 100px;
	width: 853px;
	text-align: center;
}

#beginCountdown {
	font-size: 160px; font-weight: 800;  font-family: "Titillium Web"; color: #FFF; margin: 0;
}

/* INFO screen style */
#infoScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index:200;
}

#statsAndBioContainer
{
	position:absolute;
	top:0;
	left:425px;
}

#btnCloseBio
{
	position: absolute;
	top:10px;
	left:311px;
}

#infoTransformerBio
{
	position:absolute;
	top: 0;
	left: 0;
}

#classLogo
{
	position: absolute;
	top:20px;
	left:30px;
}

#infoLineOne
{
	position:absolute;
	top: 20px;
	left: 100px;
	width: 300px;
}

#infoLineTwo
{
	position:absolute;
	top: 50px;
	left: 100px;
	width: 300px;
}

#botImage
{
	position:absolute;
	top:0;
	left:0;
}

#bioContainer
{
	position:absolute;
	top:100px;
	left:0;
}

#titleBio
{
	width:400px;
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:26px;
	text-transform:uppercase;
}

#textBio
{
	width:365px;
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size:22px;
	line-height:29px
}

#classBot, #infoSeparator, #familyBot
{
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size:24px;
	line-height: 15px;
	text-transform:uppercase;	
}

#infoBotName
{
	color: #FFFFFF;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size:24px;
	line-height: 15px;
	text-transform:uppercase;
}

#btnStats, #statsSelected
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:10px;
	left:0px;
}

#btnStats:hover
{
	color: #000000;
}

.statsText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 70px;
}

.statsText:active
{
	color: #FFFFFF;
}

#btnBio, #bioSelected
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:10px;
	left:155px;
}

#btnBio:hover
{
	color: #000000;
}

.bioText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 70px;
}

.bioText:active
{
	color: #FFFFFF;
}

#boardStatLarge
{
	position: absolute;
	top:100px;
	left:3px;
}



#btnLearnMoreBio
{
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top:385px;
	left:0;	
}

#btnLearnMoreBio:hover
{
	color: #000000;
}

.learnMoreText
{
	color: inherit;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing:3px;
	text-transform:uppercase;
    line-height: 75px;
}

.learnMoreText:active, #btnLearnMoreBio:active
{
	color: #FFFFFF;
}

#strenghtStat
{
	position: absolute;
    top: 113px;
    left: 109px;
}

#speedStat
{
	position: absolute;
    top: 177px;
    left: 109px;
}

#brainStat
{
	position: absolute;
    top: 241px;
    left: 109px;
}

#fireblastStat
{
	position: absolute;
    top: 305px;
    left: 109px;
}

#strenghtStat, #speedStat, #brainStat, #fireblastStat
{
	height:59px;
	width:10px;
}

#botsContainer
{
	position: absolute;
	top: 0;
	left:0;
}

#botSizeContainer
{
	position: absolute;
	top:386px;
	left: 0;
}

#infoClassArrow
{
	position: absolute;
	top: 26px;
	left: 25px;	
}

#iconeSize1
{
	position: absolute;
	bottom: 10px;
	left: 220px;	
}

#iconeSize2
{
	position: absolute;
	bottom: 10px;
	left: 175px;	
}

#iconeSize3
{
	position: absolute;
	bottom: 10px;
	left: 125px;	
}

#iconeSize4
{
	position: absolute;
	bottom:10px;
	left: 70px;	
}

#iconeSize5
{
	position: absolute;
	bottom:10px;
	left: 335px;	
}

/* END INFO SCREEN STYLE*/

/*  HUD SCREEN */


#boxScoreBkg
{
	position: absolute;
	top:2px;
	left: 233px;
	text-align:center;
}

#scoreContainer
{
	position: absolute; 
	top: 15px; 
	left: 200px; 
	margin: 0;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#score
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:32px;
}

#ptsText
{
	color: #FFF;
	font-family: 'Titillium Web', sans-serif;
	font-size:20px;
}

#timerContainer
{
	position: absolute;
	top:38px;
	left:60px;
	width:275px;
	height:6px;
	border:solid 1px;
	border-color: #FFF;
	/*opacity: 0.3;*/
}

#timeEllapse
{
	position: absolute;
	top:39px;
	left:61px;
	width:275px;
	height:6px;
	background-color:white;
	opacity: 0.7;
}

#btnPauseHud
{
	position: absolute;
	top:10px;
	left:748px;
}


.cooldown1
{
	position: absolute;
	top:378px;
	left:455px;
}

.cooldown2
{
	position: absolute;
	top:381px;
	left:252px;
}

.cooldown3
{
	position: absolute;
	top:381px;
	left:558px;
}

.cooldown1, .cooldown2, .cooldown3 {
    background-color:#9e0b25;
    width:40px;
    height:40px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}
.clip1 {
    position:absolute;
    top:5px;
    left:5px;
    width:30x;
    height:30px;
    clip:rect(0px, 30px, 30px, 15px);
}
.slice1 {
    position:absolute;
    width:30px;
    height:30px;
    clip:rect(0px, 15px, 30px, 0px);
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background-color:#FFFFFF;
    border-color:#FFFFFF;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.clip2 {
    position:absolute;
    top:5px;
    left:5px;
    width:30px;
    height:30px;
    clip:rect(0, 15px, 30px, 0px);
}
.slice2 {
    position:absolute;
    width:30px;
    height:30px;
    clip:rect(0px, 30px, 30px, 15px);
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background-color:#FFFFFF;
    border-color:#FFFFFF;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

#learnMoreScreen
{
	z-index: 300;
}