@import url('https://fonts.googleapis.com/css?family=Abel');

div.colorChartWrapper {
	margin: 0 auto;
}

div.colorChart {
	margin-top: 1em;
	margin-bottom: 1.5em;
	text-align: center;
}

div.colorChart div {
	width: 450px;
	
	padding: 0.375em 0.25em;
	
	display: inline-block;
	
	border-radius: 5px;
	background-color: #e8e8e8;
	box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5);
}

div.colorChart div h1 {
	margin-top: 0.125em;
	margin-bottom: 0.25em;
}

div.colorChart div.color {
	position: relative;
	
	width: 100px;
	height: 64px;
	
	display: inline-block;
	
	margin: 0.5em;
	padding: 0.5em 0.5em 0.5em;
	
	text-align: center;
	vertical-align: bottom;
	
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
	
	border-radius: 0;
}

div.colorChart div.color span {
	position: absolute;
	bottom: 0;
	left: 0;
	
	box-sizing: border-box;
	width: 100%;
	
	padding: 0.5em 0.25em;
}

div.colorChart div.color.dark span {
	text-shadow: 1px 1px 1px #000000;
}

div.colorChart div.color.light span {
	text-shadow: 1px 1px 1px #ffffff;
}

table.productColors {
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
}

table.productColors tbody tr td {
	padding: 0.75ex 1ex;
	border-bottom: 1px solid black;
	line-height: 1.75em;
	vertical-align: top;
}

table.productColors tbody tr:last-child td {
	border-bottom: 0 none transparent;
}

table.productColors tbody tr td:nth-child(1) {
	font-weight: bold;
}

table.productColors tbody tr:nth-child(odd) td {
	background-color: #99ccfd;
}

table.productColors tbody tr:nth-child(even) td {
	background-color: #ffffff;
}

span.colorBadge {
	display: inline-block;
	
	margin: 2px 3px;
	padding: 1px 5px;
	
	border-radius: 1em;
	border: 1px solid black;
	border-color: rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	
	line-height: initial;
	
	cursor: default;
}

span.colorBadge.light {
	color: #000000;
}

span.colorBadge.dark {
	color: #ffffff;
}

span.colorIconWrapper {
	display: inline-block;
	margin-right: 1ex;
}

span.colorIconWrapper:last-child {
	margin-right: 0;
}

span.colorIconWrapper span.name {
	font-family: Abel, sans-serif;
}

span.colorIcon {
	width: 0.75em;
	height: 0.75em;
	
	display: inline-block;
	
	margin-right: 0.5ex;
	
	vertical-align: middle;
	
	border-radius: 0.75em;
	
	border: 1px solid black;
}

span.colorName:after {
	content: ', ';
}

span.colorName:last-child:after {
	content: '';
}

span.colorLabel:after {
	content: ' ';
}

span.colorNote {
	font-family: Abel, sans-serif;
	font-style: italic;
	font-size: 1.2em;
}