body {
   margin:4px;
}

#canvas-container {
   width: 100%;
   text-align:center;
   max-width: 550px;
   min-width: 300px;
   margin:0 auto;
}

#canvas {
   border: solid 1px darkcyan;
}

#buttons {
   width: 100%;
   text-align:center;
   max-width: 550px;
   text-align:center;
   margin: 1px auto 1px auto;
}

.bttn {
   width:30px;
   height:30px;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:50%;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	text-shadow:0px 1px 0px #1570cd;
   display: inline-block;
   text-align:center;
}
.bttn:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
.bttn:active {
	position:relative;
	top:1px;
}

.bttn span {
    line-height: 30px;
    font-size: 15px;
}

@media only screen and (max-width: 420px) {
   .bttn {
      width:24px;
      height:24px;
   }
   .bttn span {
      line-height:24px;
      font-size:12px;
   }
}