.clear{clear:both;}

body{padding:0;margin:0;font-family:arial, sans-serif; font-size:15px;text-align:center;}

#canvas{padding:20px;padding-top:40px;text-align:left;width:560px;margin:0 auto;}

.testrow{margin-bottom:6px;padding-bottom:4px;border-bottom:solid 1px #999999;}
.testitem, .testresult{float:left;}
.testitem{width:58%;margin-right:2%;}
.testresult{width:40%;}
.res_yes{color:#00ae00;}
.res_no{color:#ab0200;}

#gyroscope{width:189px;height:50px;background:transparent url(gyroscope_sd.png) no-repeat top left;}

@media screen and (max-width:700px){
	#canvas{width:80%;}
}

@media screen and (max-width:600px){
	#canvas{width:auto;}	
}

@media screen and (max-width:420px){
	.testitem{width:68%;}
	.testresult{width:30%;}
}

@media screen and (max-width:310px){
	.testitem{width:78%;}
	.testresult{width:20%;}
}	
}
