body{
background-color: white;
height: auto;
width:100%;
margin 0 0 0 0;
}

.wrapper {
	height: auto;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

h3{
	font-size: 20px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-top: 0px;
	padding-left:15px;
	cursor: default;
	color: #eeeeee;
}
h4{
	font-size: 20px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-top: 0px;
	padding-left:15px;
	
	color: #eeeeee;
}

a:hover{
	text-decoration:underline;
}

#rightLeft{
	width: 250px; 
	height: 134px; 
	background-color: #378fc8; 
	float: left;

	box-shadow: inset 0 0 0 0 #29211e;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#rightLeft p{
	color: #f7f7f7;
}
#rightLeft:hover{
	box-shadow: inset -250px 0px 0 0 #29211e;
}
#rightLeft p:hover{
	
}
#projectMove{
	width: 250px; 
	height: 134px; 
	background-color: #378fc8; 
	float: left;

	box-shadow: inset 0 0 0 0 #29211e;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#projectMove p{
	color: #f7f7f7;
}
#projectMove:hover{
	box-shadow: inset -250px 0px 0 0 #29211e;
}
#projectMove p:hover{
	
}
#aboutMove{
	width: 250px; 
	height: 134px; 
	background-color: #378fc8; 
	float: left;

	box-shadow: inset 0 0 0 0 #29211e;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#aboutMove p{
	color: #f7f7f7;
}
#aboutMove:hover{
	box-shadow: inset 250px 0px 0 0 #29211e;
}
#aboutMove p:hover{
	
}
#downUp{
	width: 450px; 
	height: 134px; 
	background-color: #29211e; 
	float: left;
	
	box-shadow: inset 0 0 0 0 #f7f7f7;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#downUp p{
	color: #378fc8;
}
#downUp:hover{
	box-shadow: inset 450px 0px 0 0 #f7f7f7;
}

#DMove{
	width: 450px; 
	height: 134px; 
	background-color: #29211e; 
	float: left;
	
	box-shadow: inset 0 0 0 0 #f7f7f7;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#DMove p{
	color: #378fc8;
}
#DMove:hover{
	box-shadow: inset 450px 0px 0 0 #f7f7f7;
}
#resumeMove{
	width: 450px; 
	height: 134px; 
	background-color: #29211e; 
	float: left;
	
	box-shadow: inset 0 0 0 0 #f7f7f7;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#resumeMove p{
	color: #378fc8;
}
#resumeMove:hover{
	box-shadow: inset -450px 0px 0 0 #f7f7f7;
}
#animationMove{
	width: 700px; 
	height: 134px; 
	background-color: #f7f7f7; 
	float: left;
	
	box-shadow: inset 0 0 0 0 #378fc8;
	-webkit-transition: all ease   0.4s;
	-moz-transition: all ease   0.4s;
	transition: all ease   0.4s;
}
#animationMove p{
	color: #29211e;
}
#animationMove:hover{
	box-shadow: inset 0 134px 0 0 #378fc8;
 
}
#animationMove p:hover{

}

header{

	padding-left:50px;
	padding-top: 10px;
	padding-bottom: 16px;
	margin-top: 20px;
	
	background-color: #28201d;
	color: #eeeeee;
	
}

nav li a{
	color: #378fc8;
	font-size: 20px;
	text-decoration: none;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-weight: bold;
}


nav ul{
	color:#378fc8;
}
nav li{
	display: inline;
	margin-right:30px;
}

a{
	color: #378fc8;
	font-size: 20px;
	text-decoration: none;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-weight: bold;
}
.current{
	color: #eeeeee;
}
#JohnTitleHome{
	font-size: 50px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-bottom: -20px;
	color: #378fc8;
}
#GameDesAinHome{
	font-size: 30px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-bottom: -20px;
	padding-bottom: 20px;
}
#JohnTitle{
	font-size: 40px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-bottom: -20px;
	color: #378fc8;
}
#GameDesAin{
	font-size: 25px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 900;
	margin-bottom: -20px;
	padding-bottom: 20px;
}

#load{
	
	height: 80px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	color: #eeeeee;
	background-color: #378fc8;
	margin-bottom: 0px;
}

.myInfo{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	
	
}

.topLayerDiv{
	width: 99%;
	height: 80px;
	background-color: #378fc8;
}
.middleLayer{
	width: 99%;
	height: 80px;
	
	background-color: #378fc8;
}
.bottomLayerDiv{
	
	height: 80px;
	background-color: #378fc8;
	
}
.bottomLayer{
	padding-top: 0px;
	padding-bottom: 5px;

	width:95%;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
	background-color: #d4e7f3;
}


#kinectDiv{
	height:425px; 
	padding-left: 4%; 
	padding-right: 4%;
}
#dballDiv{
	height:425px; 
	padding-left: 4%; 
	padding-right: 4%;
}
#onlyDiv{
	height:585px; 
	padding-left: 4%; 
	padding-right: 4%;
}

#aboutMeID{
	width: 100%;
	overflow: hidden;
	
	
}
#aboutMeInfo{
	float:left;
	width: 50%;
	margin-left:4%;
	margin-right:2%;
	
}
#aboutMeID img{
	float:right;
	clear:none;
	margin-left:1%;
	margin-right:5%;
	
}



#bottomLayerP{
	width:52%; 
	float: left; 
	font-size:22px;
}
#kinectDiv img{
	float:left; 
	padding-right:20px; 
	clear:both;
}
#dballDiv img{
	float:left; 
	padding-right:20px; 
	clear:both;
}
#onlyDiv img{
	float:left; 
	padding-right:20px; 
	clear:both;
}
#resumeID{
	float:none;
	margin-left: auto;
	margin-right: auto;
}


object{
	height: 1015px;
}



.JMMResume{
	overflow:auto;
}

.bottomLayerHome{
	padding-top: 20px;
	padding-bottom: 20px;
	width:95%;
	height: 500px;
	margin-right:auto;
	margin-left:auto;
	background-color: #d4e7f3;
}
.topLayerDiv figure{
	  display: block;
	  margin:0px;
	  
}
p{
	color: #28201d;
}

figure {
	margin:0px;
	width:236px;
	float:left;
	
}
figcaption{
	color: #28201d;
	font-size: 24px;
	font-family: 'Arial Rounded MT Bold', 'Palatino', Arial, sans-serif; 
	font-weight: 50px;
	text-align: center;
	
}
#topImages{
	width: 720px;
	clear:both;
	margin-left: auto;
	margin-right: auto;
}
#topImages img{
	padding-right: 20px;
}
#bottomImages{
	width: 480px;
	margin-left: auto;
	margin-right: auto;
	
}
#bottomImages img{
	padding-right: 20px;
}

strong{
	color: #378fc8;
}

footer{
	
	padding-top: 35px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;

	font-size:18px;
	height: 35px;
	
	background-color: #28201d;
	color: #eeeeee;
	
}
footer div{

	float:left;
	padding-left:45px;
	
}


@media (max-width:800px) {
	.wrapper {	
		width: 100%;
	}
	
	
	
	header{
		padding-left:10px;
		padding-top: 10px;
		padding-bottom: 16px;
		margin-top: -20px;
		margin-left: -10px;
		width: 100%;
	}
	
	.myInfo{
		width: 99%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0px;
	}
	
	#kinectDiv{		
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left:0px;
		padding-right: 0px;
		overflow: hidden;
		width:92%;
	}
	#dballDiv{		
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left:0px;
		padding-right: 0px;
		overflow: hidden;
		width:92%;
	}
	#onlyDiv{		
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left:0px;
		padding-right: 0px;
		overflow: hidden;
		width:92%;
		
	}
	
	#bottomLayerP{
		width:100%;
		font-size: 20px;
	}
    
	#kinectDiv img{
		float: none;
		margin-right: auto;
		margin-left: auto;
		clear: both;
		width:100%;
	}
	#dballDiv img{
		float: none;
		margin-right: auto;
		margin-left: auto;
		clear: both;
		width:100%;
	}
	#onlyDiv img{
		float: none;
		margin-right: auto;
		margin-left: auto;
		clear: both;
		width:100%;
	}
	
	#DemoReel{
		overflow: auto;
	}
	iframe{
		width:94%;
		height: 400px;
	}
	#resumeID{
		width:92%;
	}
	#resumeID img{
		float: right;
		
		clear: both;
		overflow:hidden;
	}
	#aboutMeID{
	width: 100%;
	overflow: auto;
	}
	#aboutMeInfo{
		float:none;
		width: 92%;
		margin-left:auto;
		margin-right:auto;
		clear:both;
		
		
	}
	#aboutMeInfo a{
		font-size: 16px;
	}
	#aboutMeID img{
		float:none;
		clear:both;
		margin-left:auto;
		margin-right:auto;
	
	}
	
	.bottomLayerDiv{
		
		width: 99%;
	}
	footer{
		width:100%;
		padding-top:10px;
		overflow:auto;
		height: auto;
		text-align:center;
	}
	footer div{
		float:left;
		padding-left:10px;
		margin-left:auto;
		margin-right:auto;
		
	
	}
	
}