body{ font-family: Arial;
padding:20px; }

#bagCanvas {border: 2px solid black; margin: 4px}
#histCanvas {border: 1px solid black; margin: 4px}
#sampleCanvas {border: 1px solid gray; margin: 4px}


#rightdiv{float:left;margin: 4px}
#leftdiv{float:left;margin: 4px}

div.floater{ float:left;}
canvas{background-color:white;}

.clabel{
	width:80px;
}

#userset {
	width: 70px;	
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	float:left;
}

button{
	padding:5px 10px;
	background-color: #b3b3b3;
	border: 1px solid #ccc;
}
button:hover{
	background-color:white;
	
}

#optionsdiv{
	border: 1px solid #ccc;
	background-color:#f0f0f5;
	padding:20px;
	margin:4px;
}

#numberpadcontainer{	
	margin:10px;
}
#boxdiv{
	margin: 4px;	
	}
#drawsdiv{
	margin: 4px;
	}
	

.numbutton {
	width: 30px;
	height:30px;
    float: left;
    border: 1px solid #ccc;
	cursor: pointer;
    padding: 5px 5px; /*Leave to keep text centered.*/
	margin:2px;
	color:#292929;
	font-weight: 600;
	font-family:Arial;
  }

/* Change background color of buttons on hover */
#userset button:hover {
    background-color: white;
}

/* Create an active/current tablink class */
#userset button:active {
    background-color: #ccc;
}


#negone {background-color: #8dd3c7;}
#zero {background-color: #ffffb3;}
#one {background-color: #bebada;}
#two {background-color: #fb8072;}
#three {background-color: #80b1d3;}
#four {background-color: #fdb462;}
#five {background-color: #b3de69;}
#six {background-color: #fccde5;}
#seven {background-color: #d9d9d9;}
#eight {background-color: #bc80bd; }
#nine {background-color: #ccebc5; }
#ten {background-color: #ffed6f; }