#background {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/background.png');
}

#instructions {
  font-size: 16px;
}

#background {
  width: 100%;
  height: 100%;
  position: relative;
}

#problemArea {
  width: 500px;
  height: 130px;
  top: 10px;
  left: 45px;
  position: absolute;
  border: 2px solid #999;
  padding: 5px;
  background: #efefef;
}

#inputArea { 
  width: 97%;
  height: 30%;
  position: absolute;
  left: 2.5%;
  bottom: 0;
}

#question, #answerArea, #answerBtn {
  position: absolute;
  top : 30%;
  height: 27px;
  line-height: 27px;
}

#question {
  left: 10%;
  font-size: 20px;
  width: 15%;
}

#answerArea {
  left: 30%;
  width: 15%;
  border: 1px solid #222;  
  text-align: center;
  font-size: 20px;
}

#answerBtn {
  left: 50%;
  padding: 0px 9px;
}

.numberBtn, .backBtn {
  padding: 0px 9px;
  margin-left: 7px;
  margin-right: 8px;
  float: left;
}

.backBtn {
	position: relative;
	width: 25px;
	height: 28px;  
}

.deleteIcon {
	position: absolute;
	width: 25px;	
	height: 16px;
	left: 8px;
	top: 6px;
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/delete.png');
}

.deleteIcon:hover {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/delete.png');
}

#startButton {
  position: absolute;
  bottom: 0px;
  left: 35%;
}

#star, #star2 {
	position: absolute;
	height: 44px;
	width: 44px;
	z-index: 20;
	display: none;
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/star.png');
}



#star1 {
  top: 20px;
  left: 10px;	
}

#star2 {
	bottom: 40px;
	right: 230px;
}

#whack {
  position: absolute;
  bottom: 80px;
  right: 55px;
  width: 90px;
  height: 30px;
  z-index: 50;
  display: none;
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/whack.png');
}

#pitcher {
	position: absolute;
	bottom: 5px;
	left: 60px;
	height: 128px;
	width: 123px;
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/pitcher-spritesheet-idle.png');
}

#pitcher.pitching {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/pitcher-spritesheet-pitching.png');
}

#ball {
	position: absolute;
	display: none;
	bottom: 70px;	
	left: 169px;
	height: 13px;
	width: 13px;
	z-index: 100;
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/ball.png');
}

#batter {
	position: absolute;
  bottom: 10px;
  right: 115px;
  height: 115px;
  width: 153px;
  z-index: 30;
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/batter-spritesheet-idle.png');
}

#batter.batting {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/batter-spritesheet-swinging.png');
}

#catcher {
  position: absolute;
  bottom: 10px;
  right: 55px;
  height: 75px;
  width: 84px;
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/catcher-spritesheet-idle.png');
}

#catcher.catching {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/catcher-spritesheet-catching.png');
}

@font-face {
  font-family: "LiquidCrystal";
  src: url("../../ifCommon/scripts/requireWidgets/BaseBallFE/liquid_crystal/LiquidCrystal-Bold.otf") format("opentype");
}

#score1 {
	position: absolute;
  right: 116px;
  top: 136px;
  height: 42px;
  width: 24px;
}

#score2 {
  position: absolute;
  right: 88px;
  top: 136px;
  height: 42px;
  width: 24px;
}

.zero {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/0.png');
}

.one {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/1.png');
}

.two {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/2.png');
}

.three {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/3.png');
}

.four {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/4.png');
}

.five {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/5.png');
}

.six {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/6.png');
}

.seven {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/7.png');
}

.eight {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/8.png');
}

.nine {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/9.png');
}

#summary {
	display: none;
	width: 95%;
	height: 95%;
	border: 5px solid grey;
	position: relative;
	background: #efefef;
}

#summaryText {
	padding: 5px;
	font-size: 24px;
	height: 30px;
}

#incorrect {
	float: left;
	margin: 10px;
	padding: 5px;
	border: 2px solid grey;
	background: white;
	font-size: 16px;
	height: 80%;
	width: 40%;
	overflow: auto;
}

#batterSummary {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#batterSummary.poor {
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/end_0-59.png');
	height: 200px;
	width: 200px;
	bottom: 56px;
	right: 132px;
}

#batterSummary.good {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/end_60-84.png');
  height: 250px;
  width: 200px;
  bottom: 27px;
  right: 132px;
}

#batterSummary.great {
  background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/end_85-99.png');
  height: 250px;
  width: 153px;
  bottom: 27px;
  right: 149px;
}

#batterSummary.perfect {
	width: 600px;
	height: 250px;
	margin-right: 90px;
	background-image: url('../../ifCommon/scripts/requireWidgets/BaseBallFE/images/end_100.png');
}

#score {
	position: absolute;
	right: 79px;
	top: 129px;
	height: 50px;
	width: 60px;
	font-size: 50px;
	line-height: 48px;
	color: goldenrod;
	padding: 3px;
	background-color: inherit;
	font-family: "LiquidCrystal", Helvetica, Verdana, Sans-Serif;
	text-align: center;
}