@media only screen and (max-width: 740px) 
{
	h1 { font-size: 3.0em; }
	h3 { font-size: 2.2em; }
	h2 { display: block; text-align: center; }
	#info { float: none; display: block; text-align: center; }
	#content { padding: 20px 15px; }
	p { padding: 0; }
}

@media only screen and (max-width: 570px) 
{
	ul li {
		display: inline-block; 
		padding-left: 15px; 
		width: 140px; 
		background-position: -5px 0px;
		margin-right: 6px; 
		line-height: 1.7em;
	}
}

@media only screen and (max-width: 480px) 
{
	ul li { width: 120px; }
	#content { margin: 0 20px; }
	#arrow		{ z-index: 1000; position: absolute; top: 40px; left:  15px; width: 100px; } 
	#checkbox	{ z-index: 1000; position: absolute; top: 40px; left: 125px; width: 20px; }

	#cover		{ z-index: 1001; position: absolute; top: 20px; left: 160px; width: 100px; }
	#cvr		{ z-index: 1001; width: 100px; height:60px; }
	#finger		{ z-index: 1000; position: absolute; top: 20px; left: 160px; width: 100px; height: 60px;  }
	#fgr		{ z-index: 1000; width: 100px; height:60px; }
}

@media only screen and (max-width: 320px) 
{
	#content { margin: 0 10px; }
}

/** iPhone only **/
@media screen and (max-device-width: 480px) 
{
	h1 { font-size: 3.5em; }

	ul li { width: 150px; }
	#content { padding: 0px 0px; }
	
	#arrow		{ z-index: 1000; position: absolute; top: 40px; left:  15px; width: 100px; } 
	#checkbox	{ z-index: 1000; position: absolute; top: 40px; left: 125px; width: 20px; }

	#cover		{ z-index: 1001; position: absolute; top: 20px; left: 160px; width: 100px; }
	#cvr		{ z-index: 1001; width: 100px; height:60px; }
	#finger		{ z-index: 1000; position: absolute; top: 20px; left: 160px; width: 100px; height: 60px;  }
	#fgr		{ z-index: 1000; width: 100px; height:60px; }

}