@media screen and (max-width: 400px) {
	#slider-h, #slider-s, #slider-l {
		width: 180px;
		margin-bottom: 5px;
	}
	#hue table, #saturation table, #lightness table {
		width: 180px;
		border-spacing: 0;
	}
}
@media screen and (min-width: 401px) and (max-width: 520px) {
	#slider-h, #slider-s, #slider-l {
		width: 240px;
		margin-bottom: 5px;
	}
	#hue table, #saturation table, #lightness table {
		width: 240px;
		border-spacing: 0;
	}
}
@media screen and (min-width: 521px) {
	#slider-h, #slider-s, #slider-l {
		width: 360px;
		margin-bottom: 5px;
	}
	#hue table, #saturation table, #lightness table {
		width: 360px;
		border-spacing: 0;
	}
}

#hslTable > tbody > tr > td:nth-of-type(1) {
	width: 35px;
}
#hslTable > tbody > tr > td:nth-of-type(3) {
	padding-left: 4px;
	width: 65px;
}


#hue td, #saturation td, #lightness td {
	height: 15px;
}


#baseColorTable {
	margin: 30px 2px;
}

#baseColor {
	height: 60px;
	width: 200px;
	border: solid 2px #ccc;
	border-radius: 5px;
	text-align: center;
	padding: 10px;
}


#slider-range {
	width: 280px;
}

#paletteTable {
	border-collapse: separate;
	border-spacing: 1px;
	margin: 20px 2px;
	min-width: 325px;
}
#paletteTable th {
	padding: 1px 3px;
	border-radius: 3px;
	background: linear-gradient(#000, #888);
	color: #FFF;
}
#palette td {
	padding: 1px 4px;
	border-radius: 3px;
	font-size: 12pt;
	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}

#palette tr td:nth-of-type(1) {
	width: 190px;
}
#palette tr td:nth-of-type(2) {
	width: 80px;
}
#palette tr td:nth-of-type(3) {
	width: 65px;
}