body{margin: 0px;}

.start_main_container{width: 1200px;
				 	  height: 660px;
				 	  border: solid 1px black;
				 	  background-position: 0px 0px;
					  background-image: url('images/BakeryWindowStart.png');
				 	  background-size: 1200px auto;
	  			 	  background-repeat: no-repeat;}
	  			 	  

#play_link{width: 165px;
		   height: 75px;
		   float: left;
		   margin: 510px 0px 0px 355px;
		   display: block;}
		   

#directions_link{width: 310px;
		   		 height: 75px;
		   		 float: left;
		   		 margin: 510px 0px 0px 35px;
		   		 display: block;}


.end_main_container{width: 1200px;
				 	  height: 660px;
				 	  border: solid 1px black;
				 	  background-position: 0px 0px;
					  background-image: url('images/BakeryWindowEnd.png');
				 	  background-size: 1200px auto;
	  			 	  background-repeat: no-repeat;}

#menu_link{width: 135px;
		   height: 65px;
		   float: left;
		   margin: 550px 0px 0px 390px;
		   display: block;}
		   

#replay_link{width: 210px;
		   		 height: 64px;
		   		 float: left;
		   		 margin: 550px 0px 0px 60px;
		   		 display: block;}


.main_container {width: 1200px;
				 height: 670px;
				 border: solid 1px black;
				 background-position: 0px 0px;
				 background-image: url('images/bakerywindowvectorWeb.jpg');
				 background-size: 1200px auto;
	  			 background-repeat: no-repeat;}

.baked_good{cursor: move;
			position: absolute;
			width: 140px;
			height: 170px;
			float: left;}
			
			
			
#good1{top: 70px;
	   left: 60px;
	   width: 135px;
	   height: 160px;}
	
#chocobiscot{width: 120px;
			 height: 60px;
			 background-image: url('images/chocobiscotti.png');
			 background-repeat: no-repeat;
			 background-size: 120px, auto;}


#good2{top: 80px;
	   left: 210px;
	   height: 155px;
	   width: 130px;}
	   
#almbiscot{width: 120px;
			 height: 60px;
			 background-image: url('images/almbiscotti.png');
			 background-repeat: no-repeat;
			 background-size: 120px, auto;}


#good3{top: 80px;
	   left: 360px;
	   height: 155px;
	   width: 130px;}

#chEclair{width: 100px;
			 height: 60px;
			 background-image: url('images/chEclair.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}


#good4{top: 80px;
	   left: 505px;
	   width: 125px;
	   height: 145px;}
	   
#croissant{width: 100px;
			 height: 90px;
			 background-image: url('images/croissant.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}
	   

#good5{top: 265px;
	   left: 15px;
	   width: 125px;
	   height: 160px;}
	   
#chChipCookie{width: 100px;
			 height: 90px;
			 background-image: url('images/chChipCookie.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}	   
	   
	   
#good6{top: 275px;
	   left: 155px;
	   width: 115px;
	   height: 150px;}
	   
#sugCookie{width: 90px;
			 height: 90px;
			 background-image: url('images/sugCookie.png');
			 background-repeat: no-repeat;
			 background-size: 90px, auto;}	
			  
	   
#good7{top: 275px;
	   left: 290px;
	   width: 110px;
	   height: 160px;}
	   
#oatRaisin{width: 90px;
			 height: 90px;
			 background-image: url('images/oatRaisin.png');
			 background-repeat: no-repeat;
			 background-size: 90px, auto;}	
	   
	   
#good8{top: 265px;
	   left: 415px;
	   width: 120px;
	   height: 160px;}
	   
#cupcakeV{width: 85px;
			 height: 85px;
			 background-image: url('images/cupcakeV.png');
			 background-repeat: no-repeat;
			 background-size: 85px, auto;}	
	   
	   
#good9{top: 280px;
	   left: 545px;
	   width: 115px;
	   height: 145px;}
	   
#cupcakeC{width: 85px;
			 height: 85px;
			 background-image: url('images/cupcakeC.png');
			 background-repeat: no-repeat;
			 background-size: 85px, auto;}	
	   
	   
#good10{top: 455px;
	   left: 20px;
	   width: 120px;
	   height: 175px;}
	   
#cupcakeS{width: 85px;
			 height: 85px;
			 background-image: url('images/cupcakeS.png');
			 background-repeat: no-repeat;
			 background-size: 85px, auto;}	
	   
	   
#good11{top: 455px;
	   left: 155px;
	   width: 115px;
	   height: 155px;}
	   
#pieS{width: 100px;
			 height: 90px;
			 background-image: url('images/pieS.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}	
	   
	   
#good12{top: 470px;
	   left: 290px;
	   width: 110px;
	   height: 145px;}
	   
#pieR{width: 100px;
			 height: 90px;
			 background-image: url('images/pieR.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}	
	   
	   
#good13{top: 465px;
	   left: 415px;
	   width: 110px;
	   height: 150px;}
	   
#pieB{width: 100px;
			 height: 90px;
			 background-image: url('images/pieB.png');
			 background-repeat: no-repeat;
			 background-size: 100px, auto;}	
	   
	   
#good14{top: 465px;
	   left: 545px;
	   width: 115px;
	   height: 145px;}
	   
#cinnaBun{width: 85px;
			 height: 85px;
			 background-image: url('images/cinnaBun.png');
			 background-repeat: no-repeat;
			 background-size: 85px, auto;}	




#directionZone{width: 540px;
			   height: 650px;
			   margin: 0px 0px 0px 680px;}

			     
		  
#directions{width: 300px;
			height: 370px;
			line-height: 14px;
			padding: 0px;
			font-family: 'Raleway', sans-serif;
			font-weight: 400;
			color: rgb(89, 74, 66);
			float: left;}

#directions ul{list-style-type: none;
			   margin-top: 20px;
			   float: left;
			   margin-left: -15px;
			   width: 250px;}
			   
			   
#direction_left{width: 240px;
				height: 650px;
				float: left;}

#dropZone{width: 110px;
		  height: 140px;
		  margin-top: 251px;
		  margin-left: 15px;
		  float: left;}
		  
		  
.closedBag{background-image: url('images/paperbagClosed.png');
		  background-size: 120px auto;
		  background-position: 0px 2px;
	  	  background-repeat: no-repeat;}
		  

.openBag{background-image: url('images/paperbagOpen.png');
		 background-size: 120px auto;
	  	 background-repeat: no-repeat;}
	  	 
#dropZone:hover{background-image: url('images/paperbagOpen.png');
		 background-size: 120px auto;
	  	 background-repeat: no-repeat;}	  	 
	  	 

#blackboard_instructions{width: 210px;
			   			 height: 170px;
			   			 margin: 70px 0px 0px 38px;
			   			 padding-left: 5px;
			   			 float: left;
			   			 font-size: 20px;
						 font-family: 'Raleway', sans-serif;
						 font-weight: 300;
						 line-height: 25px;
						 text-align: left;
						 color: white;}
						 
#blackboard_instructions p{margin-top: 0px;}

.pageTwo_intro{margin-top: 20px;}

.blackboard_title{font-size: 18px;
				  font-family: 'Raleway', sans-serif;
			 	  font-weight: 500;
				  line-height: 20px;
				  color: white;
				  text-align: center;
				  margin-bottom: 5px;}
				  
 
.blackboard_emphasis{font-size: 16px;
					 font-family: 'Raleway', sans-serif;
					 font-weight: 500;
					 line-height: 20px;
					 color: white;}

.blackboard_intro p{margin-bottom: 7px;}
					 
.blackboard_intro{height: 100px;
				  font-size: 15px;
				  font-family: 'Raleway', sans-serif;
				  font-weight: 300;
				  line-height: 18px;
				  color: white;
				  margin-bottom: 5px;}

.pageTwo{margin-bottom: 45px;}
					 

#blackboard_Rarrow{width: 40px;
				   height: 25px;
				   margin-left: 90px;
				   font-size: 15px;
				   float: left;}
				   
.next_Rarrow{background-image: url("images/arrow1.png");
			 background-size: 35px auto;
			 background-position: -3px -5px;
			 background-repeat: no-repeat;}

.next_Rarrow:hover{background-image: url("images/arrow2.png");
				   background-size: 32px auto;
			 	   background-position: -1px -4px;
			 	   background-repeat: no-repeat;}
			 	   
.next_Rarrow:active{background-image: url("images/arrow3.png");
				   background-size: 32px auto;
			 	   background-position: -1px -4px;
			 	   background-repeat: no-repeat;}
			 	   
.grey_Rarrow{background-image: url("images/arrow3.png");
				   background-size: 32px auto;
			 	   background-position: -1px -4px;
			 	   background-repeat: no-repeat;}
			 	   
.grey_Rarrow:hover{background-image: url("images/arrow3.png");
				   background-size: 32px auto;
			 	   background-position: -1px -4px;
			 	   background-repeat: no-repeat;}

#start_arrow_img{width: 80px;
				 height: 60px;
				 display: block;}			 	   

#start_arrow_img a{width: 80px;
				 height: 60px;
				 display: block;
				 background-image: url('images/arrow1.png');
		 		 background-size: 80px auto;
	  	 		 background-repeat: no-repeat;
	  	 		 background-position: -5px -5px;}
	  	 		 
#start_arrow_img a:hover{float: left;
				 width: 80px;
				 height: 60px;
				 display: block;
				 background-image: url('images/arrow2.png');
		 		 background-size: 80px auto;
	  	 		 background-repeat: no-repeat;
	  	 		 background-position: -5px -5px;}
	  	 		 
#start_arrow_img a:active{float: left;
				 width: 80px;
				 height: 60px;
				 display: block;
				 background-image: url('images/arrow3.png');
		 		 background-size: 80px auto;
	  	 		 background-repeat: no-repeat;
	  	 		 background-position: -5px -5px;} 		 

				 
#startGame_arrow{width: 60px;
				 height: auto;
				 padding-left: 10px;
	  	 		 font-size: 15px;
	  	 		 line-height: 15px;}

	  	 
#encouragement1{width: 220px;
			   height: 100px;
			   margin: 70px 0px 0px 35px;
			   float: left;}
			   
.level_title{width: 220px;
			 text-align: center;}
			   
.encouragement{font-size: 25px;
				font-family: 'Raleway', sans-serif;
				font-weight: 400;
				line-height: 30px;
				color: white;
				margin-top: 0px;}

.encouragement2{font-size: 21px;
				font-family: 'Raleway', sans-serif;
				font-weight: 400;
				line-height: 25px;
				color: white;
				margin-top: 0px;
				text-align: left;}
				
.encouragement3 p{font-size: 21px;
				font-family: 'Raleway', sans-serif;
				font-weight: 400;
				line-height: 25px;
				color: white;
				margin-top: 0px;
				text-align: left;}
				
#next_level{float: left;
			width: 80px;
			height: 60px;
			margin: 10px 0px 0px 180px;}
			
			
#next_level a{display: block;
			  width: 80px;
			  height: 60px;
			  background-image: url('images/arrow1.png');
		 	  background-size: 80px auto;
	  	 	  background-repeat: no-repeat;
	  	 	  background-position: -20px auto;}
			
	  	 		  
#next_level a:hover{width: 80px;
				  height: 60px;
				  background-image: url('images/arrow2.png');
		 		  background-size: 80px auto;
	  	 		  background-repeat: no-repeat;
	  	 		  background-position: -20px auto;}
	  	 		  
#next_level a:active{width: 80px;
				   	 height: 60px;
				  	 background-image: url('images/arrow3.png');
		 			 background-size: 80px auto;
	  	 			 background-repeat: no-repeat;
	  	 		  	 background-position: -20px auto;}
				
			   
#order{margin-top: 5px;
	   margin-bottom: 65px;}
	
.indent{margin-right: 30px;
		font-size: 20px;
		font-weight: 600;}


			
#correct_bake_1{width: auto;
				height: 35px;
				margin-bottom: 10px;
				margin-left: 30px;}				

					
#correct_bake_2{width: auto;
				height: 35px;
				margin-bottom: 15px;
				margin-left: 30px;}
				

#correct_bake_3{width: auto;
				height: 35px;
				margin-bottom: 15px;
				margin-left: 30px;}
				
#correct_bake_4{width: auto;
				height: 35px;
				margin-bottom: 5px;
				margin-left: 30px;}				

				
								
.checkmark6_noFill{background-image: url('images/Checkmarks6-01.png');
					background-size: auto 35px;
					background-repeat: no-repeat;}
				
.checkmark6_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-02.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark6_twoFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-03.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark6_threeFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-04.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark6_fourFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-05.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark6_fiveFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-06.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark6_sixFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks6-07.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}



.checkmark5_noFill{background-image: url('images/Checkmarks5-08.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
				
.checkmark5_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks5-09.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark5_twoFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks5-10.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark5_threeFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks5-11.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
					
.checkmark5_fourFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks5-12.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark5_fiveFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks5-13.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}



					
.checkmark4_noFill{background-image: url('images/Checkmarks4-14.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
				
.checkmark4_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks4-15.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark4_twoFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks4-16.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark4_threeFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks4-17.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark4_fourFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks4-23.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
								
					
					
.checkmark3_noFill{background-image: url('images/Checkmarks3-24.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
				
.checkmark3_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks3-25.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark3_twoFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks3-26.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					
.checkmark3_threeFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks3-27.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}		



.checkmark2_noFill{background-image: url('images/Checkmarks2-18.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
				
.checkmark2_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks2-19.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}

.checkmark2_twoFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks2-20.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
					



.checkmark1_noFill{background-image: url('images/Checkmarks1-21.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}
				
.checkmark1_oneFill{width: auto;
					height: 35px;
					margin-bottom: 5px;
					background-image: url('images/Checkmarks1-22.png');
					background-repeat: no-repeat;
					background-size: auto 35px;}


		  
		  
@-webkit-keyframes bouncing-arrow {
  0%   { transform: translate(0px); }
  20%  { transform: translate(0px); }
  40%  { transform: translate(-30px); }
  50%  { transform: translate(0px); }
  60%  { transform: translate(-15px); }
  80%  { transform: translate(0px); }
  100% { transform: translate(0px); }
}
@-moz-keyframes bouncing-arrow {
  0%   { transform: translate(0px); }
  20%  { transform: translate(0px); }
  40%  { transform: translate(-30px); }
  50%  { transform: translate(0px); }
  60%  { transform: translate(-15px); }
  80%  { transform: translate(0px); }
  100% { transform: translate(0px); }
}
@-o-keyframes bouncing-arrow {
  0%   { transform: translate(0px); }
  20%  { transform: translate(0px); }
  40%  { transform: translate(-30px); }
  50%  { transform: translate(0px); }
  60%  { transform: translate(-15px); }
  80%  { transform: translate(0px); }
  100% { transform: translate(0px); }
}
@keyframes bouncing-arrow {
  0%   { transform: translate(0px); }
  20%  { transform: translate(0px); }
  40%  { transform: translate(-30px); }
  50%  { transform: translate(0px); }
  60%  { transform: translate(-15px); }
  80%  { transform: translate(0px); }
  100% { transform: translate(0px); }
}


.bouncing_arrow {
   animation: bouncing-arrow 2s infinite;
}