body{
	background-color:#ccc;
}

*{
	box-sizing: border-box;
}

#wrapper{
	width:980px;
	margin:auto;
}

canvas:not(.cnvs-prof){
	border:2px solid #aaa;
	margin:auto;
	display:block;
	border-radius:5px;
	padding:0;
	background-color:#fff;
	cursor:context-menu;
}

#controls ul{
	list-style:none;
	width:560px;
	overflow:hidden;
	margin:auto;
	padding:20px;
	display:block;
}

#controls ul li{
	cursor:pointer;
	float:left;
	width:50px;
	height:50px;
	margin:1% 3%;
	border-radius:100%;	
}


.red{
	background-color:#f0502a;
}

.blue{
	background-color:#236ffa;
}

.yellow{
	background-color:#fbc817;
}

.selected{
	border:2px solid #fff;
}

#colorSelect{
	display:none;
}

#revealColorSelect{
	display:block;
	width:100px;
	margin:1% auto;
	padding:15px;
	color:#148dc5;
	cursor:pointer;
}

#newColor{
	width:120px;
	height:120px;
	display:inline-block;
	border:1px solid #000;
	position:absolute;
	right:15%;
	top:26%;
}

input[type="range"]{
	display:block;
	width:40%;
}

.sliders{
	display:block;
	position:relative;
	width:500px;
	margin:auto;
	padding:15px;
	border-radius:10px 10px 0 0;
	background-color:#eee;
}

#addNewColor{
	display:block;
	margin:auto;
	border:none;
	background-color:#ddd;
	width:500px;
	padding:15px;
	outline:none;
	border-radius:0 0 10px 10px;
	color:#148dc5;
	cursor:pointer;
	transition:all 0.2s;
	-webkit-transition:all 0.2s;
}

#addNewColor:hover{
	background-color:#148dc5;
	color:#ddd;
}