html, body {
  margin: 0;
  padding: 0;
}

.red, .blue, .lightblue, .green, .orange, .yellow, .purple, .pink, .brown, .white, .grey, .black, .pen, .erase {
	width: 40px;
	height: 40px;
	cursor: pointer;
	border: 3px solid black;
	float: left;
}

.c-active {
	border: 3px solid grey;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: #0000FF;
}

.green {
	background-color: #00FF00;
}

.orange {
	background-color: #FF6A00;
}

.yellow {
	background-color: #FFEE00;
}

.purple {
	background-color: #B200FF;
}

.pink {
	background-color: #FF7F7F;
}

.brown {
	background-color: #7F0000;
}

.white {
	background-color: #FFFFFF;
}

.grey {
	background-color: #7f7f7f;
}

.black {
	background-color: #000000;
}

.lightblue {
	background-color: #00A5FF;
}

.erase img {
	margin-top: 3px;
	margin-left: 3px;
}

#canvas-container-paint {
	background-color: #ccc;
	width: 300px;
	height: 300px;
	position: relative;
	top: 0;
	z-index: 0;
	margin-bottom: 5px;
}