@charset "utf-8";

/* apply a natural box layout model to all elements */
/**, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}*/

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

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
#hangman, #hangman * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#hangman {
	width: 100%;
	height: 100%;
	/*width: 730px;
	height: 450px;*/
	/*default 16:9 ratio*/
	/*width: 800px;
	height: 600px;*/
	/*border:2px solid #000;*/
	position: relative;
	overflow:hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	background-size: 20% auto;
}
#hangman_preloader {
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
	position:absolute;
	width:300px;
	height:16px;
	background-color:#FFF;
	border:2px solid #000;
	top: 50%;
	margin-top: -10px;
	left: 50%;
	margin-left: -152px;
	/*z-index:1;*/
}

#hangman_preloader_bar {
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
	height:16px;
	background-color:#0F0;
	width:0px;	
}

#hangman_title {
	/*border: 1px solid red;*/
	width: 100%;
	height: 11%;
	/*padding-top: .5%;*/
	text-align: center;
}	


#hangman_title img {
	/*width: 100%;*//*set in js*/
	/*max-width: 100%;*//*set in js*/
	/*width: 50%;*/
	/*width: 100%;
	max-width: 80%;*/
	width: auto;
	height: 100%;
	padding: 10px 10px 0px 10px;
	/*max-height: 100%;*/
}



#hangman_spaces_box {
	/*border: 1px solid red;*/
	display: table;
	width: 100%;
	height: 12%;
}

#hangman_spaces {
	/*border: 1px solid blue;*/
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.hangman_space {
	/*border: 1px solid red;*/
	display: inline-block;
	width: 6%;/*also impacts height of hangman_spaces_box*/
	padding: .5%;	
}

.hangman_space_inner {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
	border-bottom: 4px solid #382f23;
}

#hangman_action {
	/*border: 1px solid green;*/
	position: relative;
	width: 100%;
	/*height: 50%;225px*/
	height: 57%;
	background-size: 100%;
	background-size: cover;
	background-position: bottom;
}

#hangman_predator {
	/*border: 1px solid red;*/
	position: absolute;
	/*width: 50%;*/
	height: 80%;
	width: auto;
	bottom: 0;
	left: 20%;
}

#hangman_predator img {
	/*width: 100%;
	height: auto;*/
	width: auto;
	height: 100%;
	position: absolute;
	right: 0;
}

#hangman_prey {
	/*border: 1px solid red;*/
	position: absolute;
	/*width: 35%;*//*adjust based on image*/
	/*height: 60%;*//*make same as tyrnao*/
	height: 80%;
	/*width: auto;*/
	bottom: 0;
	left: 95%;
}

/*cut with transparency 50px below 25px right*/
#hangman_prey img {
	/*width: 100%;
	height: auto;*/
	width: auto;
	/*max-width: 10%;*//*doesn't work*/
	height: 100%;
	position: absolute;
	right: 0;
}

#hangman_foreground {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-size: cover;
	background-position: bottom;
}

#hangman_red {
	position: absolute;
	top:0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 0, 0, .5);
	display: none;
}

#hangman_letters {
	/*border: 1px solid red;*/
	position: relative;
	/*height: 25%;*/
	height: 20%;
	text-align: center;
}


/*adds a couple pixels to each side*/
.hangman_aligner {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	background: red;
}

#hangman_letters_inner {
	/*background-color: green;*/
	/*border: 1px solid black;*/
	
	/*position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left:0;
	right: 0;*//*makes div 100% high*/
	/**/width: 70%;
	
	/*margin: auto;*/
	/*text-align: center;*/
	/*width: 100%;*/
	display: inline-block;
	vertical-align: middle;
	/*height: 100%;*/
	/*width: 100%;*/
	/*margin-top: 1%;*/
}

.hangman_letter {
	/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;*/
	position: relative;
	width: 7.69%;/*25px*//*7.69%*/
	/*height: 25px;*/
	/*border: 1px solid black;*//*messes up alignment of sprite in chrome*/
	display: inline-block;/*was inline-block*/
	/*float: left;*//*can't center on iphone*/
	/*margin: 3px;*/
	/*padding:2px;*/
	/*text-align: center;
	font-family: 'VAGRoundedStdBold';
	font-size: 20px;*/
	/*background-color: #FFF;*/
	
	/*overflow: hidden;*/
	/**/padding: .5%;/*messes up alignment of sprite in chrome*/
	/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;*/
	margin:0 auto;

}

.hangman_letter_inner {
	/*padding: 2px;*/
	display: block;
	/*float: left;*/
	position: relative;
	overflow: hidden;
	width: 100%;
	/*max-width: 100%;*/
	/*background-color: white;*/
	text-align: center;
	cursor: pointer;
	/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;*/
}

/*spacer image that sizes letter block to be square*/
.hangman_letter_spacer {
	width: 100%;
	height: auto;
}

/*spritesheet image expanded so image contents shrink and only one letter is seen*/
.hangman_letter_spritesheet {
	position: absolute;
	top: 0; 
	left: 0; 
	/*max-width: none; 
	max-height: 100%;*/
	/*left: -100%;*/
	/*border: 1px solid blue;*/
	
	/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;*/
	
	
	 width: 2600%;
/* margin-top: 0%;
 margin-bottom: 0%;*/
/* margin-left: -2500%;*/
 /*height: 100%;*/
/*background:white;*/
}

#hangman_audio_toggle {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 3px;
	padding: 6px;
	-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
	background-color: #382f23;
	cursor: pointer;
}

#hangman_audio_toggle div {
	width: 35px;
	/*height: 35px;*/
	border: 2px solid #fff;
	-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
	background-color: #8f755a;
	padding: 8px 6px;
	color: #fff;
	text-align: left;
}

/*blocks buttons*/
#hangman_popup_holder {
	/*background-color: red;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: table;
	/*text-align: center;*/
}

#hangman_popup_aligner {
	display: table-cell;
	vertical-align: middle;
}

#hangman_popup {
	/*position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;*/
	margin: auto;
	
	width: 50%;
	max-width: 500px;
	/*height: 60%;*/
	border: 16px solid #382f23;
	-webkit-border-radius: 32px;
	-moz-border-radius: 32px;
	border-radius: 32px;
	background-color:#f2e4c8;
	text-align:center;
	padding:10px;
	font-face:bold;
	font-size:25px;
}

#hangman_popup_text {
	margin: 0px 0px 10px 0px;
	font-family: bpreplaybold, Arial, Helvetica, sans-serif;
	/*font-weight: bold;*/
}


#hangman button {
	width: 200px;
	border: 3px solid #f7941e;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 5px;
	padding: 3px;
	color: #FFF;
	/*font-family: 'VAGRoundedStdBold';*/
	font-family: bpreplaybold, Arial, Helvetica, sans-serif;
	font-size: 30px;
	/*line-height: 30px;*/
	letter-spacing: 1px;
	cursor: pointer;
}

#hangman .easy {
	background: #fdb912; /* Old browsers */
	background: -moz-linear-gradient(top, #ffde00 0%, #fdb912 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffde00), color-stop(100%, #fdb912)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffde00 0%, #fdb912 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffde00 0%, #fdb912 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffde00 0%, #fdb912 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffde00 0%, #fdb912 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffde00', endColorstr='#fdb912', GradientType=0); /* IE6-9 */
}

#hangman .easy:hover {
	border: 3px solid #da6314;
	background: #f2810c; /* Old browsers */
	background: -moz-linear-gradient(top, #ffa900 0%, #f2810c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa900), color-stop(100%, #f2810c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffa900 0%, #f2810c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffa900 0%, #f2810c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffa900 0%, #f2810c 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffa900 0%, #f2810c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa900', endColorstr='#f2810c', GradientType=0); /* IE6-9 */
}

/*d2e27e aec52b*/
#hangman .medium {
	background: #aec52b; /* Old browsers */
	background: -moz-linear-gradient(top, #d2e27e 0%, #aec52b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d2e27e), color-stop(100%, #aec52b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #d2e27e 0%, #aec52b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #d2e27e 0%, #aec52b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #d2e27e 0%, #aec52b 100%); /* IE10+ */
	background: linear-gradient(to bottom, #d2e27e 0%, #aec52b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2e27e', endColorstr='#aec52b', GradientType=0); /* IE6-9 */
}

#hangman .medium:hover {
	border: 3px solid #da6314;
	background: #788c1c; /* Old browsers */
	background: -moz-linear-gradient(top, #9aaf54 0%, #788c1c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9aaf54), color-stop(100%, #788c1c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #9aaf54 0%, #788c1c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #9aaf54 0%, #788c1c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #9aaf54 0%, #788c1c 100%); /* IE10+ */
	background: linear-gradient(to bottom, #9aaf54 0%, #788c1c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9aaf54', endColorstr='#788c1c', GradientType=0); /* IE6-9 */
}

/*92ceec 0093cf*/
#hangman .hard {
	background: #0093cf; /* Old browsers */
	background: -moz-linear-gradient(top, #92ceec 0%, #0093cf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0% ,#92ceec), color-stop(100%, #0093cf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #92ceec 0%, #0093cf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #92ceec 0%, #0093cf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #92ceec 0%, #0093cf 100%); /* IE10+ */
	background: linear-gradient(to bottom, #92ceec 0%, #0093cf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#92ceec', endColorstr='#0093cf', GradientType=0); /* IE6-9 */
}

#hangman .hard:hover {
	background: #00629c; /* Old browsers */
	background: -moz-linear-gradient(top, #5b9aed 0%, #00629c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0% ,#5b9aed), color-stop(100%, #00629c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #5b9aed 0%, #00629c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #5b9aed 0%, #00629c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #5b9aed 0%, #00629c 100%); /* IE10+ */
	background: linear-gradient(to bottom, #5b9aed 0%, #00629c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b9aed', endColorstr='#00629c', GradientType=0); /* IE6-9 */
}



/*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 */
@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;
	}
}

/* iPads (landscape) ----------- */
@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;
}