index.css

*{
	box-sizing: border-box;
	-mox-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: sans-serif;
	user-select: none; /* disables user selection in entire document*/
	-mox-user-select:none;
	-webkit-user-select: none;
}

#toolbar{
	width: 100%;
	height: 50px;
	padding: 10px;
	background-color: #202020;
	position: fixed; /* fix it to top of canvas */
	top:0;
	color: #fff;
}

#title{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	position: relative;
	float: left;
	top: 50%;
	left: 40%;
	transform: translate(-50%, -50%); 
}

.bsb{
	width: 30px;
	height: 30px;
	padding: 5px;
	background-color: #606060;
	display: inline-block;
	text-align: center;
}

#brush{
	float:left;
}

#color{
	float:right;
}

.shade{
	width: 30px !important;
	height: 30px !important;
	border-radius: 15px !important;
	display: inline-block !important;
	margin-left: 10px !important;
}

.shade.active{
	border:2px solid white;
}

#clear{
	float: left;
	width: 50px;
	height: 30px;
	padding: 5px;
	background-color: #606060;
	display: inline-block;
	text-align: center;
}

#erase{
	float: left;
	width: 50px;
	height: 30px;
	padding: 5px;
	margin-left: 15px;
	background-color: #606060;
	display: inline-block;
	text-align: center;
}

#save{
	float: left;
	width: 50px;
	height: 30px;
	padding: 5px;
	margin-left: 15px;
	background-color: #606060;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #fff;
}