@charset "utf-8";

/*iPhone 5 in portrait (2G-4S is max-device-width 480px)*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
	#toggler, .phoneHide {
		display: none;	
	}
	
	html,body{	
		padding: 0px !important;
		margin: 0px !important;
	}
	
	#hangman {
		width: 100% !important;
		height: 100% !important;
		background-size: 50% !important;
	}
	
	#hangman_title img {
		padding: 5px 0px 0px 0px !important;
		width: auto !important;
		height: 100% !important;	
	}
	
	.hangman_space {
		/*border: 1px solid red;*/
		width: 8% !important;
		padding: 2px !important;	
	}
	
	.hangman_space_inner {
		border-bottom: 3px solid black !important;
	}
	
	#hangman_action {
		height: 45% !important;
	}
	
	#hangman_predator {
		/*border: 1px solid red;*/
		/*width: 80% !important;*//*adjust based on image*/
		/*left: -50%;*/
		height: 75% !important;
		/*left: 30% !important;*//*setting her breaks tweening on iphone*/
	}
	
	#hangman_predator img {
		/*border: 1px solid red;*/
		/*height: 100% !important;*//*adjust based on image*/
		/*left: -50%;*/
		/*width: auto !important;*/
	}
	
	#hangman_prey {
		/*border: 1px solid red;*/
		/*width: 40% !important;*//*adjust based on image*/
		/*height: 55% !important;*//*MAKE IMAGES SAME HEIGHT*/
		height: 75% !important;
	}
	
	#hangman_letters {
		/*border:1px solid red;*/
		height: 30% !important;	
	}
	
	#hangman_letters_inner {
		/*border:1px solid red;*/
		width: 95% !important;
	}
	
	.hangman_letter {
		width: 9.5% !important;
		margin: 1px !important;
	}
	
	#hangman_popup {
		width: 80%;
		font-size: 20px !important;
		border: 6px solid #382f23 !important;
	}
	
	#hangman_popup button {
		font-size: 20px !important;
	}

	#hangman_audio_toggle {
		margin: 2px !important;
		padding: 3px !important;	
	}
	
	#hangman_audio_toggle div {
		width: 30px !important;
		height: 30px !important;
		padding: 5px 4px;
		font-size: 20px !important;
	}

}


/*iPhone 5 in landsacpe (2G-4S is max-device-width 480px)*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
	#toggler, .phoneHide {
		display: none;	
	}
	
	html,body{	
		padding: 0px !important;
		margin: 0px !important;
	}
	
	#hangman {
		width: 100% !important;
		height: 100% !important;
		background-size: 50% !important;
	}
	
	#hangman_title img {
		padding: 2px 0px 0px 0px !important;
		width: auto !important;
		height: 100% !important;	
	}
	
	#hangman_spaces_box {
		/*border: 1px solid red;*/
		height: 17% !important;;
	}

	.hangman_space_inner {
		border-bottom: 2px solid black !important;
	}
	.hangman_space {
		/*border: 1px solid red;*/
		width: 5% !important;;/*also impacts height of hangman_spaces_box*/
	}
	
	#hangman_action {
		height: 48% !important;;/**/
	}
	
	#hangman_letters {
		/*border:1px solid red;*/
		height: 27% !important;/*should be 25 but not tall enough?*/	
	}
	

	
	#hangman_audio_toggle {
		margin: 2px !important;
		padding: 3px !important;	
	}
	
	#hangman_audio_toggle div {
		width: 25px !important;
		height: 25px !important;
		padding: 4px 2px;
		font-size: 18px !important;
	}

	#hangman_popup {
		width: 50%;
		font-size: 10px !important;
		border: 4px solid #382f23 !important;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		padding: 5px;
	}
		
	#hangman_popup_text {
		margin: 0px !important;
	}
	
	#hangman_popup button {
		font-size: 10px !important;
		width: 80% !important;
		height: auto !important;
		margin: 2px !important;
	}
}




/* iPad portrait 768 1024 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#toggler, .phoneHide {
		display: none !important;
	}
	
	html,body{
		padding: 0px !important;
		margin: 0px !important;
		position: fixed !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
	
	#hangman {
		width: 100% !important;
		height: 100% !important;
		
	}
	
	#hangman_title {
		height: 7% !important;
	}
	
	#hangman_predator, #hangman_prey {
		height: 50% !important;
	}

	#hangman_letters {
		height: 15% !important;
	}
		
	#hangman_letters_inner {
		/*border:1px solid red;*/
		width: 95% !important;
	}
	
	.hangman_letter {
		width: 7.7% !important;
	}
}



/* iPad landscape 768 1024 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#toggler, .phoneHide {
	display: none !important;
}
html,body{
	padding: 0px !important;
	margin: 0px !important;
	position: fixed !important;
    bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
#hangman {
	width: 100% !important;
	height: 100% !important;
}