@charset "UTF-8";

#toolbar #colors {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	display: inline-block;
	width: 48px;
	height: 48px;
	margin: 24px 2px;
	margin-left: 10px;
	border: 8px solid;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
}

#colorPicker button {
	position: relative;
	color: transparent;
}
	#colorPicker button::before {
		content: '';
		display: block;
		width: 24px;
		height: 24px;
		margin: -4px -2px -3px;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
		        border-radius: 50%;
		-webkit-box-shadow: 0 0 0 1px;
		   -moz-box-shadow: 0 0 0 1px;
		        box-shadow: 0 0 0 1px;
	}
	#colorPicker button[data-value="#000000"]::before { background-color: #000000; }
	#colorPicker button[data-value="#795548"]::before { background-color: #795548; } /* Material brown */
	#colorPicker button[data-value="#783b00"]::before { background-color: #783b00; } /* Classic brown */
	#colorPicker button[data-value="#b97a57"]::before { background-color: #b97a57; } /* Win7 brown */
	#colorPicker button[data-value="#f44336"]::before { background-color: #f44336; } /* Material red */
	#colorPicker button[data-value="#ff0000"]::before { background-color: #ff0000; } /* Classic red */
	#colorPicker button[data-value="#ed1c24"]::before { background-color: #ed1c24; } /* Win7 red */
	#colorPicker button[data-value="#ff9800"]::before { background-color: #ff9800; } /* Material orange */
	#colorPicker button[data-value="#ff00ff"]::before { background-color: #ff00ff; } /* Classic pink */
	#colorPicker button[data-value="#ff7f27"]::before { background-color: #ff7f27; } /* Win7 orange */
	#colorPicker button[data-value="#ffeb3b"]::before { background-color: #ffeb3b; } /* Material yellow */
	#colorPicker button[data-value="#ffff00"]::before { background-color: #ffff00; } /* Classic yellow */
	#colorPicker button[data-value="#fff200"]::before { background-color: #fff200; } /* Win7 yellow */
	#colorPicker button[data-value="#76ff03"]::before { background-color: #76ff03; } /* Material light green */
	#colorPicker button[data-value="#00ff00"]::before { background-color: #00ff00; } /* Classic lime green */
	#colorPicker button[data-value="#b5e61d"]::before { background-color: #b5e61d; } /* Win7 light green */
	#colorPicker button[data-value="#ffffff"]::before { background-color: #ffffff; }
	#colorPicker button[data-value="#9e9e9e"]::before { background-color: #9e9e9e; } /* Material gray */
	#colorPicker button[data-value="#787878"]::before { background-color: #787878; } /* Classic gray */
	#colorPicker button[data-value="#7f7f7f"]::before { background-color: #7f7f7f; } /* Win7 gray */
	#colorPicker button[data-value="#4caf50"]::before { background-color: #4caf50; } /* Material green */
	#colorPicker button[data-value="#008100"]::before { background-color: #008100; } /* Classic dark green */
	#colorPicker button[data-value="#21b14c"]::before { background-color: #21b14c; } /* Win7 dark green */
	#colorPicker button[data-value="#80d8ff"]::before { background-color: #80d8ff; } /* Material light blue */
	#colorPicker button[data-value="#00ffff"]::before { background-color: #00ffff; } /* Classic cyan */
	#colorPicker button[data-value="#00a1e8"]::before { background-color: #00a1e8; } /* Win7 light blue */
	#colorPicker button[data-value="#2962ff"]::before { background-color: #2962ff; } /* Material blue */
	#colorPicker button[data-value="#0000ff"]::before { background-color: #0000ff; } /* Classic blue */
	#colorPicker button[data-value="#3f48cc"]::before { background-color: #3f48cc; } /* Win7 dark blue */
	#colorPicker button[data-value="#9c27b0"]::before { background-color: #9c27b0; } /* Material purple */
	#colorPicker button[data-value="#810081"]::before { background-color: #810081; } /* Classic purple */
	#colorPicker button[data-value="#a349a4"]::before { background-color: #a349a4; } /* Win7 purple */
	#colorPicker button.pacman::after {
		content: '';
		position: absolute;
		left: 8px;
		top: 8px;
		right: 8px;
		bottom: 8px;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
		        border-radius: 50%;
		border-style: solid;
		border-width: 13px;
		border-color: transparent;
	}

#colorPickerDialog th {
	text-align: center;
}
#colorPickerDialog input {
	margin-top: 8px;
	margin-bottom: -4px;
	padding-bottom: 3px;
}
	#colorPickerDialog input[type="number"] {
		width: 48px;
	}
	#colorPickerDialog input:focus {
		padding-bottom: 2px;
	}
#lineColorSample,
#fillColorSample {
	width: 56px;
	height: 56px;
	margin: 0 8px;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
}
.picker {
	position: relative;
	display: inline-block;
	width: 256px;
	height: 256px;
	
	cursor: crosshair;
}
.picker-indicator {
	position: absolute;
	width: 5px;
	height: 5px;
	
	-webkit-transform: translate(-2px,-2px);
	   -moz-transform: translate(-2px,-2px);
	    -ms-transform: translate(-2px,-2px);
	     -o-transform: translate(-2px,-2px);
	        transform: translate(-2px,-2px);
	
	background-color: rgba(255,255,255,0.6);
	border: 1px solid rgba(0,0,0,0.6);
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	
	pointer-events: none;
}
.slide {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 256px;
	
	cursor: n-resize;
	cursor: ns-resize;
	cursor: row-resize;
}
.slide-indicator {
	position: absolute;
	width: 100%;
	height: 3px;
	
	-webkit-transform: translate(0,-1px);
	   -moz-transform: translate(0,-1px);
	    -ms-transform: translate(0,-1px);
	     -o-transform: translate(0,-1px);
	        transform: translate(0,-1px);
	
	background-color: rgba(255,255,255,0.6);
	border: 1px solid rgba(0,0,0,0.6);
	
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	
	pointer-events: none;
}

@media (max-width: 600px) {
	#toolbar #colors {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}