.title {
				font-family: sans-serif;
				font-size:0.8em;
				font-weight: bold;
				color:#333333;
			}
			#canvas {
				width:640px;
				height:350px;
				overflow:scroll;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: none;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 0.8em;
				fill:#666666;
			}

			.y.axis path,
			.y.axis line {
				opacity: 0;
			}
			
			.dataexplain {
				width:620px;
				height: 30px;
				padding:10px;
				text-align: right;
			}

			.explaintext {
				font-family: sans-serif;
				font-size:14px;
				color:#aaaaaa;
			}
			
			.buttons {
				    background-color: #ffffff;
				    border: 1px solid #888888;
				    color: #333333;
				    width:80px;
				    height:30px;
				    text-align: center;
				    text-decoration: none;
				    display: inline-block;
				    font-size: 0.8em;
				    margin: 0px 2px;
				    cursor: pointer;
			}

			.lists {
				width:640px;
				text-align: center;
			}
@media only screen and (max-width: 639px) {

	.lists {
		width:100%;
	}
	
	.title {
				font-family: sans-serif;
				font-size:0.6em;
				font-weight: bold;
				color:#333333;
			}

	#canvas {
		width:100%;
		height:250px;
	}
	.dataexplain {
				width:95%;
				height: 40px;
				padding:10px 20px 10px 10px;
				text-align: right;
			}

			.explaintext {
				font-family: sans-serif;
				font-size:0.5em;
			}
	.axis text {
				font-family: sans-serif;
				font-size: 0.8em;
				fill:#666666;
			}

	.buttons {
				    width:15%;
				    height:30px;

			}			

}