/*=============================================*/
@font-face {
    font-family: 'TitanOne';
    src: url('titanone-regular-webfont.eot');
    src: url('titanone-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('titanone-regular-webfont.woff') format('woff'),
         url('titanone-regular-webfont.ttf') format('truetype'),
         url('titanone-regular-webfont.svg#titan_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CoopFlaired';
    src: url('coopf98-webfont.eot');
    src: url('coopf98-webfont.eot?#iefix') format('embedded-opentype'),
         url('coopf98-webfont.woff') format('woff'),
         url('coopf98-webfont.ttf') format('truetype'),
         url('coopf98-webfont.svg#coopflairedmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

.portraitTest {
	position: absolute;
	width: 640px;
	height: 960px;
	background-image:url("../assets/images/system/portrait_test.png");
	background-repeat: no-repeat;
}

.achievementToast {
	position: absolute;
	width: 750px;
	height: 32px;
	background-image:url("../assets/images/achievements/TBM-UI-achievement-alert.jpg");
	background-repeat: no-repeat;
}

.achievementToast .textContainer {
	font-family: "CoopFlaired";
	font-size: 24px;
	color: #FFF;
	width: 750px;
	text-align: center;
}

/*General UI */
.blueButton {
	font-family:"TitanOne";
	font-size:16pt;
	color:white;
	position:absolute;
	width: 218px;
	height: 86px;
	margin-left:-109px;
	margin-top:-43px;
	background-image:url("../assets/images/ui/TBM-UI-btn-blue.png") ;
	background-repeat: no-repeat;
	text-align:center;	
	padding-top: 25px;
}

.purpleButton {
	font-family:"TitanOne";
	font-size:16pt;
	color:white;
	position:absolute;
	width: 218px;
	height: 86px;
	margin-left:-109px;
	margin-top:-43px;
	background-image:url("../assets/images/ui/TBM-UI-btn-green.png");
	background-repeat: no-repeat;
	text-align:center;
	padding-top: 25px;
}

.buttonText{	
	
}

.blackOverlay{
	position:absolute;
	width:750px;
	height:500px;
	background-color:rgba(0, 0, 0, 0.75);
}

.portrait .blackOverlay{
	position:absolute;
	width:640px;
	height:960px;
}

.showLogo {
	position:absolute;
	width:261px;
	height:275px;
	background-image:url("../assets/images/show_logo.png");	
}
.gameLogo {
	position: absolute;
	width:608px;
	height:163px;
	background-image:url("../assets/images/game_logo.png");	
}

/*Title Screen */
.titleScreen .background {
	position: absolute;
	width: 750px;
	height: 500px;
	background-image:url("../assets/images/backgrounds/TBM-UI-bg-beach.png");
}

.portrait .titleScreen .background {
	position: absolute;
	width: 640px;
	height: 960px;	
	background-image:url("../assets/images/title_screen/TBM-iphone-splash-bg.jpg");
}

.titleScreen .showLogo {
	left: 250px;
	top: 12px;
}

.portrait .titleScreen .showLogo {
	left: 190px;
	top: 30px;
	background-repeat: no-repeat;
	background-position:center;
}

.titleScreen .gameLogo {
	left: 80px;
	top: 244px;
}

.portrait .titleScreen .gameLogo {
	left: 20px;
	top: 472px;
}

.titleScreen .bikers {
	position: absolute;
	width: 433px;
	height: 474px;
	background-image:url("../assets/images/title_screen/TBM-splash-bikers.png");

	left: -74px;
	top: 26px;
}

.portrait .titleScreen .bikers {
	display:none;
}

.titleScreen .surfers {
	position: absolute;
	width: 313px;
	height: 483px;
	background-image:url("../assets/images/title_screen/TBM-splash-surfers.png");

	left: 487px;
	top: 17px;
}

.portrait .titleScreen .surfers {
	display:none;
}

/*Level Select Scree */
.levelSelectScreen .background {
	position: absolute;
	width: 750px;
	height: 500px;	
	background-image:url("../assets/images/level_select/TBM-UI-bg-level-select.jpg");
}

.portrait .levelSelectScreen .background {
	position: absolute;
	width: 640px;
	height:960px;
	top: 100px;
	background-size: 200%;	
	background-position: center;
	background-repeat: no-repeat;	
	background-image:url("../assets/images/level_select/TBM-UI-bg-level-select.jpg");
}

.levelSelectScreen .subHeader {
	position: absolute;
	width: 450px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 32px;
	color: #ffd800;
	text-align: center;

	left: 150px;
	top: 130px;
}

.levelSelectScreen .subHeader span {
	color: #FFF;
}

/*Level Select Button*/
.levelSelectButton .background {
	position: absolute;
	width: 390px;
	height: 279px;
	background-image: url("../assets/images/level_select/TBM-level-select-card-straight-bg.png");
}

.levelSelectButton .container {
	padding: 0;
	margin: 0;
	top: -5px;
	position: absolute;
}

.levelSelectButton .iconContainer {
	padding: 0;
	margin: 0;
	position: absolute;
}

.portrait .levelSelectButton .iconContainer {
	top: -20px !important;
	left: 80px;
}

.portrait .levelSelectButton .background {
	position: absolute;
	width: 475px;
	height: 650px;
	background-size: 100% 100%;
	background-image: url("../assets/images/level_select/TBM-level-select-card-straight-bg.png");
}

.levelSelectButton #header {
	position: absolute;
	width: 398px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 32px;
	text-align: center;
	color: #93bd04;

	top: 40px;
	left: -110px;
}

.portrait .levelSelectButton #header {
	position: absolute;
	width: 398px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 52pt;
	text-align: center;
	color: #93bd04;

	top: 25px;
	left: 50px;
}

.levelSelectButton #subheader {
	position: absolute;
	width: 190px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 28px;
	text-align: left;
	color: #894c1d;

	top: 30px;
	left: 185px;

	line-height: 28px;
}

.portrait .levelSelectButton #subheader {
	position: absolute;
	width: 320px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 28pt;
	text-align: center;
	color: #894c1d;

	top: 325px;
	left: 85px;

	line-height: 32px;
}

.levelSelectButton #description {
	position: absolute;
	width: 187px;
	height: 200px;

	font-family: "CoopFlaired";
	font-size: 20px;
	text-align: left;
	color: #c89568;

	top: 90px;
	left: 185px;
}

.portrait .levelSelectButton #description {
	position: absolute;
	width: 400px;
	height: 200px;

	font-family: "CoopFlaired";
	font-size: 24pt;
	text-align: center;
	color: #c89568;	
	line-height: 24pt;

	top: 400px;
	left: 35px;
}

.levelSelectButton .thumbnail {
	position: absolute;
	width: 155px;
	height: 155px;	

	top: 90px;
	left: 15px;
}

.portrait .levelSelectButton .thumbnail {
	position: absolute;
	width: 200px;
	height: 200px;		
	
	background-size: 100% 100%;
	
	top: 120px;
	left: 140px;
}

.locked .levelSelectButton .lockedThumbnail {
	position: absolute;
	width: 135px;
	height: 135px;
		
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-locked.png");

	top: 97px;
	left: 22px;
}

.portrait .locked .levelSelectButton .lockedThumbnail {
	position: absolute;
	width: 175px;
	height: 174px;
	
	background-size: 100% 100%;	
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-locked.png");

	top: 129px;
	left: 148px;
}

.levelSelectButton .teamIcons {
	position: absolute;
	width: 84px;
	height: 38px;

	background-image: url("../assets/images/level_select/TBM-level-select-biker-surfer-slots.png");

	top: 210px;
	left: 280px;

}

.portrait .levelSelectButton .teamIcons {
	position: absolute;
	width: 168px;
	height: 76px;
	
	background-size: 100%;
	background-image: url("../assets/images/level_select/TBM-level-select-biker-surfer-slots.png");

	top: 525px;
	left: 180px;

}

.Surfer .levelSelectButton .surferIcon {
	position: absolute;
	width: 45px;
	height: 45px;

	background-image: url("../assets/images/level_select/TBM-level-select-surfer.png");

	top: 210px;
	left: 273px;
}

.portrait .Surfer .levelSelectButton .surferIcon {
	position: absolute;
	width: 90px;
	height: 90px;	
	
	background-size: 100% 100%;
	background-image: url("../assets/images/level_select/TBM-level-select-surfer.png");

	top: 525px;
	left: 166px;
}

.Biker .levelSelectButton .bikerIcon {
	position: absolute;
	width: 45px;
	height: 45px;

	background-image: url("../assets/images/level_select/TBM-level-select-biker.png");

	top: 210px;
	left: 319px;
}

.portrait .Biker .levelSelectButton .bikerIcon {
	position: absolute;
	width: 90px;
	height: 90px;

	background-size: 100% 100%;
	background-image: url("../assets/images/level_select/TBM-level-select-biker.png");

	top: 525px;
	left: 258px;
}

.levelSelectButton #completionPercent {
	position: absolute;
	width: 100px;
	height: 50px;
	
	font-family: "CoopFlaired";
	font-size: 24px;
	text-align: right;
	color: #894c1d;

	top: 230px;
	left: 180px;
}

.portrait .levelSelectButton #completionPercent {
	position: absolute;	
	width: 100px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 36pt;
	text-align: right;
	color: #894c1d;

	top: 525px;
	left: 65px;
}

.levelSelectButton #highScore {
	position: absolute;
	width: 250px;
	height: 50px;

	font-family: "CoopFlaired";
	font-size: 20px;
	text-align: left;
	color: #894c1d;

	top: 185px;
	left: 185px;
}

.portrait .levelSelectButton #highScore {
	top: 475px;
	left: 40px;
	font-size: 36px;
	width: 350px;
	text-align: left;
}

.levelSelectButton #score {
	font-family: "CoopFlaired";
	font-size: 38px;
	color: #93bd04;
	position: absolute;
	top: 22px;
	left: 0;
}

.portrait .levelSelectButton #score {
	top: 25px;
	position: absolute;
	font-size: 86px;
}

.btn1 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-1.png");
}
.btn2 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-2.png");
}
.btn3 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-3.png");
}
.btn4 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-4.png");
}
.btn5 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-5.png");
}
.btn6 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-6.png");
}
.btn7 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-7.png");
}
.btn8 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-8.png");
}
.btn9 .levelSelectButton .thumbnail {
	background-image: url("../assets/images/level_select/TBM-UI-thumb-level-9.png");
}

/*Story Screen */
.storyScreenBackground {
	position: absolute;
	width: 750px;
	height: 500px;
	background-image:url("../assets/images/backgrounds/TBM-UI-bg-beach.png");
}

.portrait .storyScreenBackground {
	display: none;
}

.storyTextBackground {
	position: absolute;
	width: 506px;
	height:457px;
	top:10px;
	left:120px;
	background-image:url("../assets/images/hud/TBM-game-board.png");
}

.portrait .storyTextBackground {
	position: absolute;
	width: 640px;
	height:960px;
	top:0px;
	left:0px;
	background-size: 200%;
	background-position: center;
	background-repeat: no-repeat;
	background-image:url("../assets/images/hud/TBM-game-board.png");
}

.storyImageLeft {
	position: absolute;
	width: 204px;
	height: 331px;
	background-image:url("../assets/images/story_screen/TBM-story-pic-1.png");

	top: 169px;
	left: 11px;
}

.portrait .storyImageLeft {
	position: absolute;
	width: 204px;
	height: 331px;
	background-image:url("../assets/images/story_screen/TBM-story-pic-1.png");

	top: 550px;
	left: 50px;

	transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
}

.storyImageRight {
	position: absolute;
	width: 198px;
	height: 325px;
	background-image:url("../assets/images/story_screen/TBM-story-pic-2.png");

	top: 175px;
	left: 552px;

	
}

.portrait .storyImageRight {
	position: absolute;
	width: 198px;
	height: 325px;
	background-image:url("../assets/images/story_screen/TBM-story-pic-2.png");

	top: 554px;
	left: 400px;

	transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
}

.screenHeader {
	position:absolute;
	width:544px;
	height:119px;
	text-align:center;
	background-image:url("../assets/images/ui/TBM-UI-header.png");
	font-family:"CoopFlaired";
	font-size:32pt;
	padding-top:35px;
	background-repeat: no-repeat;
	color:white;

	top: 0px;
	left: 100px;
}

.portrait .screenHeader {
	position:absolute;
	width:900px;
	height:250px;
	text-align:center;
	background-image:url("../assets/images/ui/TBM-UI-header.png");
	font-family:"CoopFlaired";
	font-size:52pt;
	padding-top:70px;
	background-size: 110%;
	background-repeat: no-repeat;
	color:white;

	top: -35px;
	left: -120px;
}

.screenHeaderLogo {
	position:absolute;
	width:178px;
	height:153px;
	left:10px;
	top:20px;
}

/*Hud */
.hudHeader {
	position:absolute;
	left:0px;
	top:0px;
	width: 750px;
	height: 52px;
}

.hudFooter {
	position:absolute;
	width: 750px;
	height: 57px;
	top: 443px;
}

.hudSceneLabel {	
	font-family:"TitanOne";
	color:white;
	position:absolute;
	left: 240px;
	top: 10px;	
}

.hudTakeLabel {	
	font-family:"TitanOne";
	color:white;
	position:absolute;
	left: 450px;
	top: 10px;	
}

.hudObjectiveLabel {	
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	text-align: center;
	width: 200px;
	font-size: 16pt;
	left: 280px;
	top: 70px;	
}

.hudObjective {	
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	text-align: center;
	width: 200px;
	font-size: 18pt;
	left: 280px;
	top: 83px;	
}

.portrait .hudObjectiveLabel {
	position: absolute;
	left: 510px;
	top: 15px;
	font-size: 24pt;
	width: 150px;
	margin-left:-75px;
	text-align: center;
}

.portrait .hudObjective {
	position: absolute;
	left: 510px;
	top: 40px;
	font-size: 36pt;
	width: 150px;
	margin-left:-75px;
	text-align: center;
}

#hudBikerNameLabel {
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	text-align: center;
	width: 199px;
	height: 73px;
	padding-top: 18px;
	font-size: 18pt;
	left: 10px;
	top: 325px;
	background-image:url("../assets/images/hud/TBM-game-label-biker.png");	
	background-repeat: no-repeat;
}

.portrait #hudBikerNameLabel {
	top: 865px;
	left: 135px;
	text-align:center;
	margin-left:-100px;
	padding-top: 40px;
	background-size: 80%;	
	background-position:center;
}

.portrait #hudSurferNameLabel {
	top: 865px;
	left: 495px;
	text-align:center;
	margin-left:-100px;
	padding-top: 40px;
	background-size: 80%;	
	background-position:center;
}

#hudSurferNameLabel {
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	text-align: center;
	width: 199px;
	height: 73px;
	padding-top: 18px;
	font-size: 18pt;
	left: 550px;
	top: 325px;
	background-image:url("../assets/images/hud/TBM-game-label-surfer.png");	
	background-repeat: no-repeat;
}


.hudTimeLabel {	
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	font-size: 18pt;
	left: 360px;
	top: 90px;	
}

.portrait .hudTimeLabel {	
	position: absolute;
	left: 510px;
	top: 40px;
	font-size: 36pt;
	width: 150px;
	margin-left:-75px;
	text-align: center;
}

.hudBikersVsSurfers {
	width: 200px;
	height: 200px;
	position:absolute;
	display: block;
	font-family:"CoopFlaired";
	color:white;
	margin-left: -100px;
	margin-top: -50px;
	font-size: 36pt;
	text-align:center;
	line-height:36pt;
}

.hudScoreLabel {
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	font-size: 32pt;	
	text-align:center;
	left: 380px;
	width: 200px;
	margin-left: -100px;
	top: 18px;
}

.portrait .hudScoreLabel {		
	left: 130px;	
	top: 40px;	
	width: 150px;
	margin-left:-75px;
}

.hudBikersLabel {
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	font-size: 16pt;
	left: 50px;
	width:150px;
	top: 35px;	
	text-align: center;
}

.portrait .hudBikersLabel {
	display: none;
}

.hudSurfersLabel {
	font-family:"CoopFlaired";
	color:white;
	position:absolute;
	font-size: 16pt;
	left: 555px;
	top: 35px;
	width: 150px;
	text-align: center;
}

.portrait .hudSurfersLabel {
	display: none;
}

.hudYellowText {
	font-family:"TitanOne";
	color:#fcce32;
}

.hudScoreHeading {
	display: none;
}

.portrait .hudScoreHeading {
	font-family:"CoopFlaired";
	font-size: 24pt;
	text-align:center;
	color: white;
	display: inline;
	position:absolute;	
	left: 130px;
	top: 15px;
	width: 150px;	
	margin-left:-75px;	
}

.hudTimeHeading {
	display: none;
}

.portrait .hudTimeHeading {
	font-family:"CoopFlaired";
	font-size: 24pt;
	text-align:center;
	color: white;
	display: inline;
	position:absolute;
	left: 510px;
	top: 15px;
	width: 150px;
	margin-left:-75px;
}

.menuButton {	
	width:69px;
	height:68px;
	background-image:url("../assets/images/hud/TBM-UI-btn-menu.png");
}

.portrait .menuButton {
	position:absolute;
	left: 525px;
	top: 760px;
	width: 110px;
	height: 110px;
	background-size: 100%;
}
.soundToggleButton {	
	width:69px;
	height:68px;
	
}

.on .soundToggleButton {
	background-image:url("../assets/images/hud/TBM-UI-btn-sound.png");
}

.off .soundToggleButton {
	background-image:url("../assets/images/hud/TBM-UI-btn-sound-off.png");
}

.portrait .soundToggleButton {
	position:absolute;
	left: 21px;
	top: 760px;
	width: 110px;
	height: 110px;
	background-size: 100%;
}

.btn {
}

.btn-blue {
	background-image: url("../assets/images/ui/TBM-UI-btn-blue.png");
	width: 210px;
	height: 126px;
}

.btn-blue:hover
{
	background-color: #FF0000;
	width: 210px;
	height:126px;
}

.btn-green {
	background-image: url("../assets/images/ui/TBM-UI-btn-green.png");
	width: 226px;
	height: 126px;
}

.btnText {
	font-family: "CoopFlaired";
	font-size: 24px;
	color: #FFFFFF;
	text-align: center;
}

.btn-blue .btnText {
	padding: 52px 0 0 0;
	width: 210px;
	text-shadow: 3px 3px 1px rgba(1, 113, 150, 1);
}

.btn-green .btnText {
	padding: 50px 0 0 0;
	width: 226px;
	text-shadow: 3px 3px 1px rgba(1, 150, 113, 1);
}

/* Level Recap */
.levelRecapSceneLabel {
	font-family:"TitanOne";
	color:white;
	position:absolute;
	left: 220px;
	top: 165px;	
	font-size: 12pt;
}

.levelRecapTimeLabel {
	font-family:"TitanOne";
	color:white;
	position:absolute;
	left: 325px;
	top: 165px;	
	font-size: 12pt;
}

.levelRecapTakesLabel {
	font-family:"TitanOne";
	color:white;
	position:absolute;
	left: 470px;
	top: 165px;	
	font-size: 12pt;
}

.levelRecapYellowText {
	font-family:"TitanOne";
	color:#fcce32;
	font-size:24pt;
}

.levelRecapGroupText {
	position:absolute;
	left:180px;
	top:200px;
	font-family:"TitanOne";
	color:#fcce32;
	font-size:36pt;	
}

.levelRecapBackground {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:500px;
}

/*Pause Screen */
.pauseScreenBackground {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:500px;
}

.portrait .pauseScreenBackground {
	position:absolute;
	left:0px;
	top:0px;
	width:640px;
	height:960px;
}

/*Game Complete*/
.gameCompleteScreen .background {
	position: absolute;
	width: 750px;
	height: 750px;
	background-image:url("../assets/images/backgrounds/TBM_BigMammasShack_Ext_Day.png");
}

.gameCompleteScreen .leftImage {
	position: absolute;
	width: 168px;
	height: 342px;
	background-image:url("../assets/images/game_complete/TBM-game-complete-pic-1.png");

	left: 0px;
	top: 158px;
}

.portrait .gameCompleteScreen .leftImage {
	position: absolute;
	width: 168px;
	height: 342px;
	background-image:url("../assets/images/game_complete/TBM-game-complete-pic-1.png");

	left: 0px;
	top: 625px;
}

.gameCompleteScreen .rightImage {
	position: absolute;
	width: 238px;
	height: 493px;
	background-image:url("../assets/images/game_complete/TBM-game-complete-pic-2.png");

	left: 513px;
	top: 7px;
}

.portrait .gameCompleteScreen .rightImage {
	position: absolute;
	width: 238px;
	height: 493px;
	background-image:url("../assets/images/game_complete/TBM-game-complete-pic-2.png");

	left: 402px;
	top: 475px;
}

.gameCompleteScreen #gameCompleteText {
	position: absolute;
	font-family: "CoopFlaired";
	font-size: 24px;
	color: #FFF;
	width: 300px;
	height: 350px;
	text-align:center;

	left: 225px;
	top: 150px;
}

.portrait .gameCompleteScreen #gameCompleteText {
	position: absolute;
	font-family: "CoopFlaired";
	font-size: 38px;
	color: #FFF;
	width: 500px;
	margin-left: -250px;
	height: 350px;
	text-align:center;

	left: 320px;
	top: 350px;
}

/* Tutorial */
.tutorial .background {
	position: absolute;
	width: 750px;
	height: 500px;	
	background-image:url("../assets/images/level_select/TBM-UI-bg-level-select.jpg");
}

.portrait .tutorial .background {
	position: absolute;
	top: 100px;
	width: 640px;
	height: 960px;	
	background-size: 200%;
	background-position: center;
	background-repeat: no-repeat;
	background-image:url("../assets/images/level_select/TBM-UI-bg-level-select.jpg");
}

/* Achievements */
.achievementsScreen .background {
	position: absolute;
	width: 750px;
	height: 500px;
	background-image:url("../assets/images/backgrounds/TBM-UI-bg-beach.png");

}

.portrait .achievementsScreen .background {
	position: absolute;
	width: 640px;
	height: 960px;	
	background-image:url("../assets/images/backgrounds/TBM-iphone-beach-bg.jpg");
}