October 16, 2014 19:44
diff --git a/JSPad.html b/JSPad.html
 <html>
 <head>

 <script>

 </script>

 <style type='text/css'>
 	h1, p {
 		text-align: center;
 		font-family: sans-serif;
 		margin-bottom: 0;
 	}
 	
 	#trooper {
 		width: 600px;
 		height: 600px;
 		margin: 0 auto;
 		margin-top: 20px;
 		position: relative;
 	}
 	
 	.border {
 		border: 8px solid #000;
 		background-color: #fff;
 	}
 	
 	#helmetTop {
 		width: 355px;
 		height: 385px;
 		margin: 0 auto;
 		margin-top: 10px;
 		-webkit-border-radius: 175px 175px 60px 60px;
 		-moz-border-radius: 175px 175px 60px 60px;
 		border-radius: 175px 175px 60px 60px;
 		position: relative;
 		z-index: 2;
 	}
 	
 	#uniBrow {
 		width: 385px;
 		height: 25px;
 		background-color: #000;
 		position: absolute;
 		z-index: 3;
 		top: 170px;
 		left: 107px;
 	}
 	
 	.ear {
 		width: 16px;
 		height: 90px;
 		position: absolute;
 		top: 205px;
 	}
 	
 	.qTip {
 		height: 50px;
 		width: 10px;
 		background-color: #000;
 		position: absolute;
 		top: 235px;
 	}
 	
 	#lEar {
 		left: 90px;
 	}
 	
 	#rEar {
 		right: 90px;
 	}
 	
 	#lTip {
 		left: 80px;
 	}
 	
 	#rTip {
 		right: 80px;
 	}
 	
 	.eye {
 		height: 65px;
 		width: 128px;
 		position: absolute;
 		top: 210px;		
 		background-color: #000;
 		z-index: 3;
 	}
 	
 	#leftEye {
 		left: 140px;
 		-webkit-border-radius: 50px 60px 160px 90px;
 		-moz-border-radius: 50px 60px 160px 90px;
 		border-radius: 50px 60px 160px 90px;
 	}
 	
 	#rightEye {
 		right: 140px;
 		-webkit-border-radius: 60px 50px 90px 160px;
 		-moz-border-radius: 60px 50px 90px 160px;
 		border-radius: 60px 50px 90px 160px;		
 	}
 	
 	.inner {
 		width: 136px;
 		height: 40px;
 		background-color: #fff;
 		border: 5px solid white;
 		position: absolute;
 		top: 250px;		
 		-webkit-border-radius: 5px;
 		-moz-border-radius: 5px;
 		border-radius: 5px;
 		z-index: 5;
 	}
 	
 	#innerL {
 		-webkit-transform: rotate(-25deg);
 		-moz-transform: rotate(-25deg);	
 		-o-transform: rotate(-25deg);
 		-ms-transform: rotate(-25deg);		
 		transform: rotate(-25deg);		
 		left: 150px;
 	}
 	
 	#innerR {
 		-webkit-transform: rotate(25deg);
 		-moz-transform: rotate(25deg);
 		-o-transform: rotate(25deg);			
 		-ms-transform: rotate(25deg);					
 		transform: rotate(25deg);			
 		right: 150px;
 	}
 	
 	#goatee {
 		position: absolute; 
 		top: 460px;
 		left: 252px;
 		z-index: 6;
 	}
 	
 	#goatee div:nth-child(1) {
 		height:10px;
 		width: 15px;
 	}
 	
 	#goatee div:nth-child(2){ 
 		height: 30px;
 		width: 38px;
 	}
 	
 	#goatee div:nth-child(3){ 
 		height: 20px;
 		width: 70px;
 	}
 	
 	#goatee div:nth-child(4){ 
 		height: 52px;
 		width: 98px;
 	}

 	#goatee div:nth-child(5){ 
 		height: 16px;
 		width: 33px;
 	}
 	
 	.cheek {
 		height: 150px;
 		width: 150px;
 		position: absolute;
 		top: 311px;
 		-webkit-border-radius: 100px;
 		-moz-border-radius: 100px;
 		border-radius: 100px;						
 		z-index: 1;
 	}
 	
 	#lCheek {
 		left: 30px;
 	}
 	
 	#rCheek {
 		right: 30px;
 	}
 	
 	.cheekLine {
 		font-family: "Arial Narrow", sans-serif;
 		font-size: 120px;
 		position: absolute;
 		top: 370px;
 		z-index: 3;
 	}
 	
 	#leftLine {
 		left: 200px;
 		-webkit-transform: rotate(-25deg);
 		-moz-tranform: rotate(-25deg);
 		-o-transform: rotate(-25deg);
 		-ms-transform: rotate(-25deg);		
 		transform: rotate(-25deg);
 	}
 	
 	#rightLine {
 		right: 200px;
 		-webkit-transform: rotate(25deg);
 		-moz-tranform: rotate(25deg);
 		-o-transform: rotate(25deg);		
 		-ms-transform: rotate(25deg);				
 		transform: rotate(25deg);
 	}
 	
 	#upperMouth {
 		height: 300px;
 		width: 300px;
 		position: absolute;
 		top: 335px;
 		left: 145px;
 		background-color: transparent;
 		-webkit-border-top-left-radius: 90px;	
 		-moz-border-radius-topleft: 90px;
 		border-top-left-radius: 90px;						
 		-webkit-transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-ms-transform: rotate(45deg);				
 		-o-transform: rotate(45deg);
 		transform: rotate(45deg);				
 		border-right: 0;
 		border-bottom: 0;
 		z-index: 2;
 	}
 	
 	.tooth {
 		background-color: #000;
 		width: 20px;
 		position: absolute;
 		z-index: 2;
 	}
 	
 	#l1 {
 		top: 330px;
 		left: 235px;
 		height: 30px;	
 		-webkit-border-top-left-radius: 10px;
 		-moz-border-radius-topleft: 10px;
 		border-top-left-radius: 10px;						
 		
 	}	
 	
 	#l2 {
 		top: 317px;
 		left: 270px;
 		height: 30px;
 	}
 	
 	#r2 {
 		top: 318px;
 		right: 270px;
 		height: 31px;
 	}
 	
 	#r1 {
 		top: 331px;
 		right: 235px;
 		height: 30px;
 		-webkit-border-top-right-radius: 12px;
 		-moz-border-radius-topright: 12px;
 		border-top-right-radius: 12px;						
 		
 	}
 	
 	#mouth {
 		height: 300px;
 		width: 300px;
 		margin: 0 auto;
 		margin-top: -60px;
 		position: relative;	
 		border-bottom: 0;
 		border-right: 0;
 		-webkit-border-top-left-radius: 150px;
 		-moz-border-radius-topleft: 150px;
 		border-top-left-radius: 150px;						
 		-webkit-transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-o-transform: rotate(45deg);	
 		-ms-transform: rotate(45deg);	
 		transform: rotate(45deg);
 		z-index: 2;			
 	}
 	
 	#mouthCover {
 		z-index: 3;
 		background-color: #fff;
 		position: absolute;
 		top: 333px;
 		left: 192px;
 		height: 200px;
 		width: 200px;
 		border-color: #fff;
 		-webkit-border-top-left-radius: 150px;
 		-moz-border-radius-topleft: 150px;
 		border-top-left-radius: 150px;						
 		-webkit-transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
 		-ms-transform: rotate(45deg);			
 		transform: rotate(45deg);
 	}
 	
 	.chin {
 		height: 200px;
 		width: 170px;
 		position: absolute;
 		z-index: 2;
 		top: 380px;
 	}
 	
 	#lChin {
 		left: 90px;
 		-webkit-border-radius: 75px 100px 75px 100px;	
 		-moz-border-radius: 75px 100px 75px 100px;	
 		border-radius: 75px 100px 75px 100px;						
 		-webkit-transform: rotate(-55deg);		
 		-moz-transform: rotate(-55deg);	
 		-o-transform: rotate(-55deg);
 		-ms-transform: rotate(-55deg);								
 		transform: rotate(-55deg);		
 	}
 	
 	#rChin {
 		right: 89px;
 		-webkit-border-radius: 100px 75px 100px 75px;	
 		-moz-border-radius: 100px 75px 100px 75px;	
 		border-radius: 100px 75px 100px 75px;	
 		-webkit-transform: rotate(55deg);		
 		-moz-transform: rotate(55deg);	
 		-ms-transform: rotate(55deg);			
 		-o-transform: rotate(55deg);					
 		transform: rotate(55deg);					
 	}
 	
 	.dimple {
 		background-color: #000;
 		position: absolute;
 		z-index: 5;
 		top: 520px;
 		height: 40px;
 		width: 40px;
 		-webkit-border-radius: 40px;
 		-moz-border-radius: 40px;
 		border-radius: 40px;
 	}
 	
 	#leftDimp {
 		left: 180px;
 	}
 	
 	#rightDimp {
 		right: 180px;
 	}
 	
 	.dimpleBase {
 		height: 65px;
 		width: 70px;
 		-webkit-border-radius: 100px 200px 100px 200px;
 		-moz-border-radius: 100px 200px 100px 200px;
 		border-radius: 100px 200px 100px 200px;
 		-webkit-transform: rotate(135deg);
 		-moz-transform: rotate(135deg);
 		-o-transform: rotate(135deg);		
 		-ms-transform: rotate(135deg);			
 		transform: rotate(135deg);
 		position: absolute;
 		z-index: 3;
 		top: 499px;
 	}
 	
 	#leftBase {
 		left: 157px;
 	}
 	
 	#rightBase {
 		right: 157px;
 	}
 	
 	.slight {
 		height: 35px;
 		width: 40px;
 		position: absolute;
 		top: 515px;
 		z-index: 4;
 		border-top: 0;
 	}
 	
 	#leftSlight {
 		left: 235px;
 		border-left: 0;
 	}
 	
 	#rightSlight {
 		right: 238px;
 		border-right: 0;
 	}
 	
 	.vents {
 		position: absolute;
 		z-index: 4;
 		top: 350px;
 	}
 	
 	.vents p {
 		width: 7px;
 		background-color: #000;
 		margin-right: 5px;
 		float: left;
 	
 	}
 	
 	#lvent p:first-child {
 		height: 20px;
 	}
 	
 	#lvent p:nth-child(2) {
 		height: 23px;
 	}

 	#lvent p:nth-child(3) {
 		height: 26px;
 	}

 	#lvent p:nth-child(4) {
 		height: 29px;
 	}

 	#lvent p:nth-child(5) {
 		height: 32px;
 	}
 	
 	#lvent p:nth-child(6) {
 		height: 35px;
 	}
 		
 	#lvent p:last-child {
 		height: 38px;
 	}

 	#rvent p:last-child {
 		height: 20px;
 	}
 	
 	#rvent p:nth-child(6) {
 		height: 23px;
 	}

 	#rvent p:nth-child(5) {
 		height: 26px;
 	}

 	#rvent p:nth-child(4) {
 		height: 29px;
 	}

 	#rvent p:nth-child(3) {
 		height: 32px;
 	}
 	
 	#rvent p:nth-child(2) {
 		height: 35px;
 	}
 		
 	#rvent p:first-child {
 		height: 38px;
 	}
 	
 	#lvent {
 		left: 50px;
 		-webkit-transform: rotate(60deg);
 		-moz-transform: rotate(60deg);
 		-o-transform: rotate(60deg);
 		-ms-transform: rotate(60deg);
 		transform: rotate(60deg);
 	}
 	
 	#rvent {
 		right: 50px;
 		-webkit-transform: rotate(-60deg);
 		-moz-transform: rotate(-60deg);
 		-o-transform: rotate(-60deg);
 		-ms-transform: rotate(-60deg);
 		transform: rotate(-60deg);
 		
 	}
 	
 	i {
    font-weight:300;
    }

 	#nose {
 		width: 105px;
 		height: 105px;
 		-webkit-border-top-left-radius: 40px;
 		-moz-border-radius-topleft: 40px;
 		border-top-left-radius: 40px;
 		-webkit-transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
 		-ms-transform: rotate(45deg);			
 		transform: rotate(45deg);
 		position: absolute;
 		z-index: 5;
 		border-right-color: #fff;
 		border-bottom-color: #fff;
 		top: 453px;
 		left: 241px;
 	}
 	
 	#goatee div {
 		background-color: #000;
 		margin: 0 auto;
 	}

 	#fitty {
 		height: 100%;
 		width: 1px;
 		background-color: red;
 		position: absolute;
 		z-index: 340;
 		left: 50%;
 		top: 0;
 	}
 </style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script></head>
 <body></script>
 </body>
 </html>
	<html>
	<head>

	<script>

	</script>

	<style type='text/css'>
	h1, p {
	text-align: center;
	font-family: sans-serif;
	margin-bottom: 0;
	}

	#trooper {
	width: 600px;
	height: 600px;
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	}

	.border {
	border: 8px solid #000;
	background-color: #fff;
	}

	#helmetTop {
	width: 355px;
	height: 385px;
	margin: 0 auto;
	margin-top: 10px;
	-webkit-border-radius: 175px 175px 60px 60px;
	-moz-border-radius: 175px 175px 60px 60px;
	border-radius: 175px 175px 60px 60px;
	position: relative;
	z-index: 2;
	}

	#uniBrow {
	width: 385px;
	height: 25px;
	background-color: #000;
	position: absolute;
	z-index: 3;
	top: 170px;
	left: 107px;
	}

	.ear {
	width: 16px;
	height: 90px;
	position: absolute;
	top: 205px;
	}

	.qTip {
	height: 50px;
	width: 10px;
	background-color: #000;
	position: absolute;
	top: 235px;
	}

	#lEar {
	left: 90px;
	}

	#rEar {
	right: 90px;
	}

	#lTip {
	left: 80px;
	}

	#rTip {
	right: 80px;
	}

	.eye {
	height: 65px;
	width: 128px;
	position: absolute;
	top: 210px;
	background-color: #000;
	z-index: 3;
	}

	#leftEye {
	left: 140px;
	-webkit-border-radius: 50px 60px 160px 90px;
	-moz-border-radius: 50px 60px 160px 90px;
	border-radius: 50px 60px 160px 90px;
	}

	#rightEye {
	right: 140px;
	-webkit-border-radius: 60px 50px 90px 160px;
	-moz-border-radius: 60px 50px 90px 160px;
	border-radius: 60px 50px 90px 160px;
	}

	.inner {
	width: 136px;
	height: 40px;
	background-color: #fff;
	border: 5px solid white;
	position: absolute;
	top: 250px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	z-index: 5;
	}

	#innerL {
	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	-o-transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	transform: rotate(-25deg);
	left: 150px;
	}

	#innerR {
	-webkit-transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	-o-transform: rotate(25deg);
	-ms-transform: rotate(25deg);
	transform: rotate(25deg);
	right: 150px;
	}

	#goatee {
	position: absolute;
	top: 460px;
	left: 252px;
	z-index: 6;
	}

	#goatee div:nth-child(1) {
	height:10px;
	width: 15px;
	}

	#goatee div:nth-child(2){
	height: 30px;
	width: 38px;
	}

	#goatee div:nth-child(3){
	height: 20px;
	width: 70px;
	}

	#goatee div:nth-child(4){
	height: 52px;
	width: 98px;
	}

	#goatee div:nth-child(5){
	height: 16px;
	width: 33px;
	}

	.cheek {
	height: 150px;
	width: 150px;
	position: absolute;
	top: 311px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	z-index: 1;
	}

	#lCheek {
	left: 30px;
	}

	#rCheek {
	right: 30px;
	}

	.cheekLine {
	font-family: "Arial Narrow", sans-serif;
	font-size: 120px;
	position: absolute;
	top: 370px;
	z-index: 3;
	}

	#leftLine {
	left: 200px;
	-webkit-transform: rotate(-25deg);
	-moz-tranform: rotate(-25deg);
	-o-transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	transform: rotate(-25deg);
	}

	#rightLine {
	right: 200px;
	-webkit-transform: rotate(25deg);
	-moz-tranform: rotate(25deg);
	-o-transform: rotate(25deg);
	-ms-transform: rotate(25deg);
	transform: rotate(25deg);
	}

	#upperMouth {
	height: 300px;
	width: 300px;
	position: absolute;
	top: 335px;
	left: 145px;
	background-color: transparent;
	-webkit-border-top-left-radius: 90px;
	-moz-border-radius-topleft: 90px;
	border-top-left-radius: 90px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	border-right: 0;
	border-bottom: 0;
	z-index: 2;
	}

	.tooth {
	background-color: #000;
	width: 20px;
	position: absolute;
	z-index: 2;
	}

	#l1 {
	top: 330px;
	left: 235px;
	height: 30px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;

	}

	#l2 {
	top: 317px;
	left: 270px;
	height: 30px;
	}

	#r2 {
	top: 318px;
	right: 270px;
	height: 31px;
	}

	#r1 {
	top: 331px;
	right: 235px;
	height: 30px;
	-webkit-border-top-right-radius: 12px;
	-moz-border-radius-topright: 12px;
	border-top-right-radius: 12px;

	}

	#mouth {
	height: 300px;
	width: 300px;
	margin: 0 auto;
	margin-top: -60px;
	position: relative;
	border-bottom: 0;
	border-right: 0;
	-webkit-border-top-left-radius: 150px;
	-moz-border-radius-topleft: 150px;
	border-top-left-radius: 150px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 2;
	}

	#mouthCover {
	z-index: 3;
	background-color: #fff;
	position: absolute;
	top: 333px;
	left: 192px;
	height: 200px;
	width: 200px;
	border-color: #fff;
	-webkit-border-top-left-radius: 150px;
	-moz-border-radius-topleft: 150px;
	border-top-left-radius: 150px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	}

	.chin {
	height: 200px;
	width: 170px;
	position: absolute;
	z-index: 2;
	top: 380px;
	}

	#lChin {
	left: 90px;
	-webkit-border-radius: 75px 100px 75px 100px;
	-moz-border-radius: 75px 100px 75px 100px;
	border-radius: 75px 100px 75px 100px;
	-webkit-transform: rotate(-55deg);
	-moz-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	transform: rotate(-55deg);
	}

	#rChin {
	right: 89px;
	-webkit-border-radius: 100px 75px 100px 75px;
	-moz-border-radius: 100px 75px 100px 75px;
	border-radius: 100px 75px 100px 75px;
	-webkit-transform: rotate(55deg);
	-moz-transform: rotate(55deg);
	-ms-transform: rotate(55deg);
	-o-transform: rotate(55deg);
	transform: rotate(55deg);
	}

	.dimple {
	background-color: #000;
	position: absolute;
	z-index: 5;
	top: 520px;
	height: 40px;
	width: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	}

	#leftDimp {
	left: 180px;
	}

	#rightDimp {
	right: 180px;
	}

	.dimpleBase {
	height: 65px;
	width: 70px;
	-webkit-border-radius: 100px 200px 100px 200px;
	-moz-border-radius: 100px 200px 100px 200px;
	border-radius: 100px 200px 100px 200px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	z-index: 3;
	top: 499px;
	}

	#leftBase {
	left: 157px;
	}

	#rightBase {
	right: 157px;
	}

	.slight {
	height: 35px;
	width: 40px;
	position: absolute;
	top: 515px;
	z-index: 4;
	border-top: 0;
	}

	#leftSlight {
	left: 235px;
	border-left: 0;
	}

	#rightSlight {
	right: 238px;
	border-right: 0;
	}

	.vents {
	position: absolute;
	z-index: 4;
	top: 350px;
	}

	.vents p {
	width: 7px;
	background-color: #000;
	margin-right: 5px;
	float: left;

	}

	#lvent p:first-child {
	height: 20px;
	}

	#lvent p:nth-child(2) {
	height: 23px;
	}

	#lvent p:nth-child(3) {
	height: 26px;
	}

	#lvent p:nth-child(4) {
	height: 29px;
	}

	#lvent p:nth-child(5) {
	height: 32px;
	}

	#lvent p:nth-child(6) {
	height: 35px;
	}

	#lvent p:last-child {
	height: 38px;
	}

	#rvent p:last-child {
	height: 20px;
	}

	#rvent p:nth-child(6) {
	height: 23px;
	}

	#rvent p:nth-child(5) {
	height: 26px;
	}

	#rvent p:nth-child(4) {
	height: 29px;
	}

	#rvent p:nth-child(3) {
	height: 32px;
	}

	#rvent p:nth-child(2) {
	height: 35px;
	}

	#rvent p:first-child {
	height: 38px;
	}

	#lvent {
	left: 50px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
	}

	#rvent {
	right: 50px;
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	transform: rotate(-60deg);

	}

	i {
	font-weight:300;
	}

	#nose {
	width: 105px;
	height: 105px;
	-webkit-border-top-left-radius: 40px;
	-moz-border-radius-topleft: 40px;
	border-top-left-radius: 40px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	z-index: 5;
	border-right-color: #fff;
	border-bottom-color: #fff;
	top: 453px;
	left: 241px;
	}

	#goatee div {
	background-color: #000;
	margin: 0 auto;
	}

	#fitty {
	height: 100%;
	width: 1px;
	background-color: red;
	position: absolute;
	z-index: 340;
	left: 50%;
	top: 0;
	}
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script></head>
	<body></script>
	</body>
	</html>