/*
 * Copyright 2013 BlackBerry Limited.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

html { height: 100% }

body {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: -webkit-gradient(linear,  left top,  left bottom,
		color-stop(20%, red),
		color-stop(40%, orange),
		color-stop(60%, yellow),
		color-stop(70%, green),
		color-stop(100%, blue));
}

#headTop, #theHead, #mouthOpen, #mouthClosed, #jesse, #squint, #hitHead, #hitNose, #hitMouth {
	position: absolute;
}

.openHead {
	-webkit-animation-name: openHead;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes openHead {
	from {
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 0 90%;
	}
	to {
		-webkit-transform: rotate(-50deg);
		-webkit-transform-origin: 0 90%;
	}
}


/* ================================================================ */
/* 								Q10 								*/
/* ================================================================ */

@media screen and (max-width: 720px) and (max-height: 720px){


	#squint {
		display: none;
		top: 136px;
		left: 222px;
	}

	#squint img {
		width: 300px;
	}

	#headTop {
		top: 136px;
		left: 242px;
	}

	#headTop img {
		width: 256px;
	}

	#jesse {
		/*display: none;*/
		top: 230px;
		left: 315px;
	}

	#jesse img {
		width: 160px;
	}

	.jesseUp {
		-webkit-animation-name: jesseUp;
		-webkit-animation-duration:0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-timing-function: ease;
		-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes jesseUp {
		from {
			top: 230px;
		}
		to {
			top: 113px;
		}
	}

	#theHead {
		top: 210px;
		left: 220px;
	}

	#theHead img {
		width: 300px;
	}


	#mouthOpen {
		display: none;
		top: 418px;
		left: 230px;
	}

	#mouthOpen img {
		width: 276px;
	}

	#mouthClosed {
		top: 418px;
		left: 228px;
	}

	#mouthClosed img {
		width: 282px;
	}

	#hitHead {
		top: 130px;
		left: 230px;
		height: 150px;
		width: 280px;
		z-index: 9999;
	}


	#hitNose {
		top: 370px;
		left: 320px;
		height: 110px;
		width: 100px;
		z-index: 9999;
	}


	#hitMouth {
		top: 515px;
		left: 275px;
		height: 200px;
		width: 180px;
		z-index: 9999;
	}
}



/* ================================================================ */
/* 								Z10 								*/
/* ================================================================ */
@media screen and (min-height: 721px){
	#squint {
		display: none;
		top: 260px;
		left: 125px;
	}

	#headTop {
		top: 260px;
		left: 164px;
	}

	.openHead {
		-webkit-animation-name: openHead;
		-webkit-animation-duration:1s;
		-webkit-animation-timing-function: ease;
		-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes openHead {
		from {
			-webkit-transform: rotate(0deg);
			-webkit-transform-origin: 0 90%;
		}
		to {
			-webkit-transform: rotate(-50deg);
			-webkit-transform-origin: 0 90%;
		}
	}


	#jesse {
		top: 400px;
		left: 280px;
	}


	.jesseUp {
		-webkit-animation-name: jesseUp;
		-webkit-animation-duration:0.5s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-timing-function: ease;
		-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes jesseUp {
		from {
			top: 400px;
		}
		to {
			top: 206px;
		}
	}


	#theHead {
		top: 391px;
		left: 125px;
	}


	#mouthOpen {
		display: none;
		top: 758px;
		left: 140px;
	}


	#mouthClosed {
		top: 758px;
		left: 140px;
	}


	#hitHead {
		top: 270px;
		left: 140px;
		height: 200px;
		width: 500px;
		z-index: 9999;
	}


	#hitNose {
		top: 700px;
		left: 310px;
		height: 170px;
		width: 170px;
		z-index: 9999;
	}


	#hitMouth {
		top: 900px;
		left: 230px;
		height: 400px;
		width: 320px;
		z-index: 9999;
	}
}
