@font-face {
	font-family: 'Awesome';
	src: 	url('/fonts/awesome.eot');
	src: 	url('/fonts/awesome.otf')		format('opentype'),
	 	url('/fonts/awesome.eot?#iefix')	format('embedded-opentype'),
		url('/fonts/awesome.woff')		format('woff'),
		url('/fonts/awesome.ttf')		format('truetype'),
		url('/fonts/awesome.svg#awesomeregular')	format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Remove 'X' IE adds to all text input fields */
::-ms-clear { display: none; }


body {
	background-color : #ffffff;
}


#gameWrapper {
	position : absolute;
	margin : -300px -392px;
	left : 50%;
	top : 50%;
}


#gameContainer
{
	background-color : #ffffff;
	width : 785px;
	height : 600px;
	position : absolute;
	left : 0px;
	top : 0px;
	padding : 0px;
	margin : 0px;
	font-family : Awesome, Verdana, Arial;
	color : #000000;
	text-align : left;
}


#gameContainer div
{	padding : 0px;
	margin : 0px;
}


#gameContainer canvas
{
	position : absolute;
	left : 0px;
	top : 0px;
	z-index : 20;
	pointer-events : none;
}



#bg {
	position : absolute;
	top : 0px;
	left : 0px;
	height : inherit;
	width : inherit;
	padding : 0px;
	margin : 0px;
	background : none;
}

#bg.drill {
	background : url('../img/bg-drill.png') 0px 0px no-repeat;
}

#bg.victoryLap {
	background : url('../img/bg-drillNoHUD.png') 0px 0px no-repeat;
}

#bg.drillPassed {
	background : url('../img/levelPassed.png') 51px 71px no-repeat;
}

#bg.drillFailed {
	background : url('../img/levelFailed.png') 51px 71px no-repeat;
}

#bg.final {
	background : url('../img/bg-final.png') 0px 0px no-repeat;
}

.gameScreen
{
	display : none;	
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	overflow : hidden;
}

.gameScreen.activeScreen
{	display : block;
}



#blockUser {
	text-align : center;
}


#gameFrame {
	position : absolute;
	top : 0px;
	left : 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border : 13px solid #000000;
	border-left-width : 15px;
	border-right-width : 15px;
	border-radius : 35px;
	width : inherit;
	height : inherit;
	z-index : 100;
	pointer-events:none;
}


#speaker {
	background : url("/shootNScore/img/speaker.png") 0px 0px no-repeat;
	position : relative;
	top : 3px;
	left : 725px;
	height : 20px;
	width : 20px;
	cursor : pointer;
	pointer-events : auto;
}
#speaker.off {
	background-image : url("/shootNScore/img/speakerOff.png");
}



.clickBlocker {
	height : inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left : 0px;
	display : none;
}



/*	--- Preloader ---	*/

#preloaderScreen {
	height : inherit;
	width : inherit;
}

#loading, #loadingQuestions {
	position : absolute;
	top : 200px;
	left : 0px;
	width : 100%;
	text-align : center;
	font-size : 80px;
}

.preloaderThrobber {
	position : absolute;
	left : 368px;
	top : 276px;
	background : url('../img/throbber.png') -24px -24px no-repeat;
	width : 48px;
	height : 48px;

	-webkit-animation-name: spin;
	-webkit-animation-duration: 1000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: spin;
	-moz-animation-duration: 1000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	-ms-animation-name: spin;
	-ms-animation-duration: 1000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}



/*	--- Main Menu ---	*/
#mainMenuScreen {
	width : inherit;
	height : inherit;
}

#mainMenuInstruction {
	font-family : Arial, Helventica, sans-serif;
	font-size : 13px;
	font-weight : bold;
	position : absolute;
	left : 40px;
	top : 30px;
	width : 162px;
	text-align : center;
}

#mainMenuBird {
	background : url('../img/birdNet.png') 0px 0px no-repeat;
	width : 279px;
	height : 223px;
	position : absolute;
	top : 65px;
	left : 450px;
}

#mainMenuBTTLogo {
	position : absolute;
	left : 615px;
	top : 500px;
	background : url('../img/breezingLogo.png') 0px 0px no-repeat;
	width : 125px;
	height : 52px;
}


#mainMenuIntro {
	position : absolute;
	left : 100px;
	top : 263px;
	width : 501px;
	height : 286px;
	pointer-events:none;
	background-position : 0px 0px;
	background-repeat : no-repeat;
}


.mainMenuGameBtn {
	position : absolute;
	width : 162px;
	height : 51px;
	left : 40px;
	background-position : 0px 0px;
	background-repeat : no-repeat;
	cursor : pointer;
}

.mainMenuGameBtn.inactive
{	opacity : 0.5;
}

.mainMenuGameBtn.selected
{
}

#mainMenuGameSSBtn {
	top : 56px;
}

#mainMenuGameRRBtn {
	top : 112px;
}

#mainMenuGameIIBtn {
	top : 168px;
}

#mainMenuGameTTBtn {
	top : 224px;
}

#mainMenuScreen .subscribeBubble {
	position : absolute;
	left : 215px;
	width : 151px;
	height : 101px;
	background : url('../img/subscribe.png') 0px 0px no-repeat;
	display : none;
	z-index : 10;
}

#mainMenuScreen .subscribeBubble.SS {
	top : 31px;
}

#mainMenuScreen .subscribeBubble.RR {
	top : 87px;
}

#mainMenuScreen .subscribeBubble.II {
	top : 143px;
}

#mainMenuScreen .subscribeBubble.TT {
	top : 199px;
}




/*	--- INSTRUCTIONS ---	*/
div#instructions {
	position : absolute;
	top : 28px;
	left : 45px;
	background : url('../img/instructions.png') 0px 0px no-repeat;
	width : 615px;
	height : 415px;

	color : #ffffff;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 17px;
	line-height : 1.3em;

	padding : 115px 0px 0px 65px;
}

div#instructions p
{	
	width : 400px;
	padding-bottom : 20px;
}


.mainMenuBtn {
	background : url('../img/botOrangeMainMenu.png') 0px 0px no-repeat;
	width : 116px;
	height : 72px;
	position : absolute;
	right : 20px;
	bottom : 20px;
	cursor : pointer;
	z-index : 5;
}


#instrAboutBtn {
	background : url('../img/btn-aboutLevels.png') 0px 0px no-repeat;
	width : 103px;
	height : 57px;
	position : absolute;
	left : 161px;
	top : 325px;
	cursor : pointer;
}

#instrReadyBtn {
	background : url('../img/btn-ready.png') 0px 0px no-repeat;
	width : 101px;
	height : 56px;
	position : absolute;
	left : 280px;
	top : 325px;
	cursor : pointer;
}

#instrHighScoresBtn {
	background : url('../img/btn-highScores.png') 0px 0px no-repeat;
	width : 103px;
	height : 57px;
	position : absolute;
	left : 397px;
	top : 325px;
	cursor : pointer;
}

#instrHighScoresBubble {
	background : url('../img/ranking.png') 0px 0px no-repeat;
	width : 332px;
	height : 214px;
	position : absolute;
	left : 414px;
	top : 318px;
	display : none;
	opacity : 0;
	pointer-events : none;
	cursor : pointer;
}


#instrAboutBubble {
	background : url('../img/popup-levels.png') 0px 0px no-repeat;
	width : 321px;
	height : 299px;
	position : absolute;
	left : 337px;
	top : 280px;
	display : none;
	opacity : 0;
	pointer-events : none;
}


.levelsBubble {
	background : url('../img/popup-selectLevel.png') 0px 0px no-repeat;
	width : 331px;
	height : 264px;
	position : absolute;
	left : 337px;
	top : 280px;
	display : none;
	opacity : 0;
	pointer-events : none;
	z-index : 10;
}

#drillPassedScreen .levelsBubble {
	top : 323px;
	left : 290px;
}

#highScoresScreen .levelsBubble {
	top : 340px;
	left : 400px;
}


.bubbleText {
	position : absolute;
	left : 41px;
	top : 85px;
	width : 120px;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 12px;
	color : #ffffff;
}

.levelsBubble .bubbleText {
	top : 133px;
	left : 55px;
}

.bubbleText p.levelTitle {
	width : 235px;
	font-weight : bold;
}

.levelsBubble .bubbleText p.levelTitle {
	font-size : 17px;
	padding : 0px 0px 4px 0px;
	cursor : pointer;
}

.bubbleText p.levelDesc {
	width : 265px;
	font-size : 11px;
	font-weight : normal;
	font-style : italic;
	padding : 0px 0px 5px 0px;
}



/*	--- HIGH SCORES ---	*/
#highScoresScreen {
	color : #000000;
}

#highScoresTitle {
	position : absolute;
	top : 40px;
	color : #00CC00;
	font-family : Awesome, Verdana, Arial;
	font-size : 40px;
	width : 100%;
	text-align : center;
}

#highScoresLevelListing {
	position : absolute;
	top : 133px;
	left : 50px;
	font-family : Awesome, Verdana, Arial;
	color : #FF0000;
	font-size : 25px;
}

#highScoresLevelListing ul {
}

#highScoresLevelListing li {
	cursor : pointer;
	padding : 0px 0px 8px 0px;
}


#highScoresTable {
	position : absolute;
	left : 250px;
	top : 130px;
	font-family : Arial, Helventica, sans-serif;
	font-size : 14px;
	color : #000099;
	text-align : left;
	line-height : 30px;
}

#highScoresTable tr {
}

#highScoresTable td.rank {
}

#highScoresTable td.hsPlayerName {
	width : 240px;
	max-width : 240px;
	overflow: hidden;
	white-space: nowrap;
}

#highScoresTable td.hsGoals {
	width : 80px;
}

#highScoresTable td.hsTime {
}

#highScoresScreen .blueMainMenuBtn {
	position : absolute;
	top : 480px;
	left : 350px;
	width : 105px;
	height : 57px;
	background : url('../img/btn-mainMenu.png') 0px 0px no-repeat;
	cursor : pointer;
}

#highScoresScreen .nextLevelBtn, #drillPassedScreen .nextLevelBtn {
	background : url('../img/btn-nextLevel.png') 0px 0px no-repeat;
	width : 103px;
	height : 57px;
	position : absolute;
	top : 480px;
	left : 350px;
	cursor : pointer;
	z-index : 5;
}

#highScoresScreen .restartBtn, #drillFailedScreen .restartBtn {
	background : url('../img/btn-restart.png') 0px 0px no-repeat;
	width : 103px;
	height : 57px;
	position : absolute;
	top : 480px;
	left : 350px;
	cursor : pointer;
	z-index : 5;
}

#highScoresRank {
	position : absolute;
	top : 210px;
	left : 40px;
	text-align : center;
}

#highScoresRank .rankTitle {
	font-size : 30px;
	color : #00cbff;
}

#highScoresRank .rank {
	font-size : 80px;
	color : #ff6600;
}




/*	--- DRILL SCREEN ---	*/

#drillScreen {
}

#drillScreen .shots {
	position : absolute;
	top : 527px;
	left : 57px;
	width : 30px;
	z-index : 10;
	font-size : 30px;
	text-align : center;
}


#drillScreen .goals {
	position : absolute;
	top : 527px;
	left : 112px;
	width : 30px;
	z-index : 10;
	font-size : 30px;
	text-align : center;
}


#drillScreen .timer {
	position : absolute;
	top : 520px;
	left : 650px;
	z-index : 10;
	font-size : 40px;
}


#drillScreen .levelBanner {
	position : absolute;
	top : 8px;
	left : 380px;
	z-index : 9;
}

#drillScreen .levelBanner img {
	display : inline-block;
	margin-right : 15px;
}

#drillScreen .gameBanner {
	position : absolute;
	top : 152px;
	right : 15px;
	z-index : 10;
}

#drillScreen .question {
	position : absolute;
	top : 28px;
	left : 38px;
	z-index : 1;
}

#drillScreen .answer1, #drillScreen .answer2, #drillScreen .answer3
{
	position : absolute;
	top : 238px;
	left : 190px;
	cursor : pointer;
	z-index : 1;
}
#drillScreen .answer2 {
	left : 330px;
}
#drillScreen .answer3 {
	left : 475px;
}


#drillScreen .ice {
	position : absolute;
	top : 0px;
	left : 0px;
	height : inherit;
	width : inherit;
	background : url('../img/bg-drill.png') 0px 0px no-repeat;
	z-index : 5;
	pointer-events:none;
}




/*	--- FAIL SCREEN ---	*/

#drillFailedScreen .failText {
	position : absolute;
	top : 250px;
	left : 210px;
	text-align : center;
	font-family : "Times New Roman", Arial, Helvetica;
	font-size : 24px;
	color : #ffffff;
}

#drillFailedScreen .mainMenuBtn {
	right : 20px;
	bottom : 20px;
}

#drillFailedScreen .restartBtn {
	left : 228px;
	top : 385px;
}

#drillFailedScreen .seeScoreBtn, #drillPassedScreen .seeScoreBtn {
	background : url('../img/btn-seeScore.png') 0px 0px no-repeat;
	width : 103px;
	height : 55px;
	position : absolute;
	left : 372px;
	top : 387px;
	cursor : pointer;
	z-index : 5;
}




.crowd {
	position : absolute;
	top : 11.5px;
	left : 16.5px;
	height : 167px;
	width : 760px;
	background : url('../img/crowd.png') no-repeat;
}


/*	--- PASS SCREEN ---	*/

#drillPassedScreen .seeScoreBtn {
	top : 335px;
	left : 350px;
}

#drillPassedScreen .nextLevelBtn {
	left : 228px;
	top : 337px;
}




/*	--- FINAL SCREEN ---	*/
#finalScreen {
	background : url('../img/finalScreen.png') 0px 0px no-repeat;
	z-index : -10;
}




/*	--- SUBMIT SCORE SCREEN ---	*/

#submitScoreScreen {
	width : inherit;
	height : inherit;
}


#submitScoreScreen .summary {
	font-size : 34px;
	color : #000099;
	text-align : center;
	position : absolute;
	top : 50px;
	left : 0px;
	line-height : 50px;
	width : 100%;
}



#submitScoreScreen .score {
	color : #009900;
	text-align : center;
}


#submitScoreScreen .score .percentage {
	position : absolute;
	left : 160px;
	top : 420px;
	font-size : 150px;
}

#submitScoreScreen .score .shootingAverage {
	position : absolute;
	left : 180px;
	top : 545px;
	font-family : Arial, Helventica;
	font-size : 20px;
}


#submitScoreScreen .okBtn {
	background : url('../img/btn-ok.png') 0px 0px no-repeat;
	width : 103px;
	height : 58px;
	position : absolute;
	left : 500px;
	top : 460px;
	cursor : pointer;
	z-index : 5;
}

#submitScoreScreen .okBtn.inactive {
	opacity : 0.5;
}

#submitScoreScreen .inputName {
	position : absolute;
	left : 110px;
	top : 270px;
}

#submitScoreScreen .showName {
	position : absolute;
	left : 0px;
	top : 270px;
	width : 100%;
	text-align : center;
	font-family : Awesome, Verdana, Arial;
	color : #ff6500;
	font-size : 70px;
	border : none;
	outline : none;
	padding-left : 0px;
	padding-right : 0px;
	display : none;
}

#submitScoreScreen #scoreName, #submitScoreScreen #scoreInitial {
	font-family : Awesome, Verdana, Arial;
	color : #ff6500;
	font-size : 70px;
	text-align : left;
	border : none;
	border-bottom : 1px solid #000000;
	border-radius : 0px;
	outline : none;
	padding-left : 0px;
	padding-right : 0px;
}

#submitScoreScreen #scoreName {
	width : 450px;
}


#submitScoreScreen #scoreInitial {
	width : 60px;
	margin-left : 20px;
}


@media only screen and (max-width: 790px) {
	
	#gameContainer {
		-ms-transform : scale(0.75, 0.75);
		-webkit-transform : scale(0.75, 0.75);
		transform : scale(0.75, 0.75);
	}
}

@media only screen and (max-width: 600px) {
	
	#gameContainer {
		-ms-transform : scale(0.50, 0.50);
		-webkit-transform : scale(0.50, 0.50);
		transform : scale(0.50, 0.50);
	}
}

@media only screen and (max-height: 600px) {
	
	#gameContainer {
		-ms-transform : scale(0.65, 0.65);
		-webkit-transform : scale(0.65, 0.65);
		transform : scale(0.65, 0.65);
	}
}

@media only screen and (max-height: 390px) {
	
	#gameContainer {
		-ms-transform : scale(0.5, 0.5);
		-webkit-transform : scale(0.5, 0.5);
		transform : scale(0.5, 0.5);
	}
}