/* head */
#head {
	width: 80px;
	height: 30px;
	border: solid black;
	border-width: 0 6px;
	background: #999;
	position: absolute;
}

/* #head:before = left ear | #head:after = right ear */
#head:before, #head:after {
	width: 40px;
	height: 30px;
	top: -30px;
	background: linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(#999, #999) no-repeat,
				linear-gradient(#999, #999) no-repeat,
				linear-gradient(#999, #999) no-repeat,
				linear-gradient(#999, #999) no-repeat;
	background-size: 6px 24px, 12px 6px, 12px 6px, 6px 6px, 6px 6px, 12px 30px, 12px 12px, 12px 6px, 6px 6px;
	background-position: 0 6px, 6px 0, 30px 18px, 18px 6px, 24px 12px, 6px 6px, 18px 18px, 30px 24px, 18px 12px;
}

#head:after {
	right: 0;
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}

#face {
	width: 80px;
	height: 100%;
	position: absolute;
	top: 6px;

	background: linear-gradient(white, white) no-repeat,
				linear-gradient(white, white) no-repeat,
				linear-gradient(#f99, #f99) no-repeat,
				linear-gradient(#f99, #f99) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat;

	background-size: 6px 6px, 6px 6px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
	background-position: 17px 0, 56px 0, 5px 12px, 68px 12px, 17px 0, 56px 0, 42px 6px, 23px 18px, 40px 18px, 56px 18px;
}

/* #face:before = chin */
#face:before {
	bottom: -12px;
	width: 100%;
	height: 18px;

	background: linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(black, black) no-repeat,
				linear-gradient(#999, #999) no-repeat,
				linear-gradient(#999, #999) no-repeat;

	background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 56px 6px, 39px 6px, 68px 6px, 56px 6px;
	background-position: 0 0, 6px 6px, 74px 0, 68px 6px, 12px 12px, 23px 0, 6px 0, 12px 6px;
}

/* FRAME 1 AND 5 */
.frame1 #head, .frame5 #head {
	bottom: 36px;
	right: 0;
}

/* FRAMES 2 AND 3 AND 4 */
.frame2 #head, .frame3 #head, .frame4 #head {
	bottom: 36px;
	right: -6px;
}

/* FRAME 6 */
.frame6 #head {
	bottom: 42px;
	right: 0;
}