/**
 * Container for the ColorSelector
 */
div.colorselector {
    width: 100%;
    background-color: #fff;
    position: relative;
}

canvas.colorselector_canvas{
}



/**
 * The Controls div contains the UI elements that control which color (variant) is shown
 */
div.colorselector_controls{
    font-family: 'UniversLTStd45Light', Helvetica, Arial, sans-serif;
}

/**
 * A Layer is a group of colors/variants for a feature of the product
 */
section.colorselector_controls_layer {
    min-height: 1px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    clear: both;
	padding-top:20px;
	padding-bottom:20px;

}

section.colorselector_controls_layer:last-child {
    border-bottom: 0px;
}

/**
 * Layer Header
 */
section.colorselector_controls_layer header{
    float: left;
    width: 130px;
    margin: 0;
    padding: 0;
}

@media (max-width: 800px) {
section.colorselector_controls_layer header{
    float: left;
    width: 80px;
    margin: 0;
    padding: 0;
}
}
/**
 * Layer header Title
 */
section.colorselector_controls_layer header h1{
	font-family: 'UniversLTStd55Roman', Helvetica, Arial, sans-serif;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    padding: 0 5px;
    margin: 0;
    margin-top: 5px;
	line-height: 20px;
}

section.colorselector_controls_layer header h2{
	font-family: 'UniversLTStd55Roman', Helvetica, Arial, sans-serif;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    padding: 0 5px;
    margin: 0;
    margin-top: 5px;
	line-height: 20px;
}

section.colorselector_controls_layer header div.colorselector_controls_variant_name{
    color: #333;
    padding: 2px 5px;
    font-size: 12px;
}


@media (max-width: 1100px) {

section.colorselector_controls_layer header div.colorselector_controls_variant_name{
    color: #fff;
}
}


@media (max-width: 800px) {
section.colorselector_controls_layer header h1{
    font-size: 11px;
    padding: 0 5px;
    margin: 0;
    margin-top: 5px;
	line-height: 20px;
}

section.colorselector_controls_layer header div.colorselector_controls_variant_name{
    padding: 2px 5px;
    font-size: 9px;
}
}


/**
 * The variants/colors are crated as an unordered list
 */
section.colorselector_controls_layer ul{
    margin: 0;
    padding: 0;
    padding-top: 2px;
    margin-left: 140px;
}


@media (max-width: 800px) {
section.colorselector_controls_layer ul{
    margin-left: 90px;
}
}

/**
 * Color/Variant menu item container
 */
section.colorselector_controls_layer li{
    display: inline-block;
    list-style: none;
    border: 0;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    z-index: 97;
	opacity: 1;
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15);
	-webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	transition: 0.3s linear;
    margin: 1%;
	padding: calc(6.4% - 4px);/** forces the width and height to make seven columns CHANGE if you need more or less cols  */
	min-width:30px;
	min-height:30px;
}

section.colorselector_controls_layer li.colorselector-thumb-optional{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMDlFOUE2RkMzODUxMUU1QjIyOEQ0ODU3NEE3RUIxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMDlFOUE3MEMzODUxMUU1QjIyOEQ0ODU3NEE3RUIxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwOUU5QTZEQzM4NTExRTVCMjI4RDQ4NTc0QTdFQjEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIwOUU5QTZFQzM4NTExRTVCMjI4RDQ4NTc0QTdFQjEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/iQGqAAAAfxJREFUeNpifPv2LQOF4Ncv3vh41l27mCg16M8fntRUoEH/RUQoM+vvX56MDLYtW/4LCn5au5YCs/79487LY1u//j8f3+c1a/7q6JBr1v//3EVF7CtW/Ofh+bxq1R8DA6AYE3kGcVVWsi9e/J+T8/Py5X9MTSHC5JjFVVfHMXv2fw6OL0uX/rGygouTbBZnayvHtGkMbGxfFi78bW+PLEWaWZzd3Zx9fSCD5s797eKCJkuCWRyTJ3N2dDAwM3+ZMeOXlxemAmLN4pg5k6uhAWTQlCm//P2xqiHKLPYFC7iqqxkYGb/29/8KC8OljLBZ7MuWcZeUABlfu7p+RkfjUcmC3yC2NWu4CwqACepba+vPpCT8ivG5i23TJp6sLGCm+1ZX9yMjg6APcJrFtmMHT3o60KDv5eU/8vOJCVbsZrHu3cuTmAgsmL4XFHwvKyMyrrGYxXroEE98PNCgH5mZ32triU+A6GaxHD/OExXF+P37j+Tkb83NJOUKFLNYzpzhjYwEGvQzJuZbZycwQZFpFsvFi7yhoYyfP/8MD/8KzHQkGoQwi/nqVd6QEMZPn34FBHydPBmYV8goi0BmMd+8yRcUxPju3S9vb2C+Jc8gkFnM9+7xBgYyvnnz29X1y5w5DKysZFcAjH+lpJiePfvt4PBl2bL/7OyU1EoAAQYAWDO6HPhCnFoAAAAASUVORK5CYII=');
}

/**
 * Color/Variant menu item container  Hover Styles
 */
section.colorselector_controls_layer li:hover{
    border: 0;
	opacity: 0.7;
	-webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	transition: 0.3s linear;
}


section div.colorselector_controls_variant_tooltip {
    background: white;
    background: rgba(255,255,255,.9);
    border-radius: 3px;
    border: 1px solid silver;
    bottom: 96px;
    color: #555;
    content: attr(data-colorselector-label);
    left: 10%;
    padding: 5px 15px;
    position: absolute;
    z-index: 989;
    width: auto;
    opacity:1;
    display: none;
	font-size:smaller;
}

@media (max-width: 1700px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 86px;
}

}

@media (max-width: 1600px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 76px;
}

}

@media (max-width: 1500px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 66px;
}

}

@media (max-width: 1400px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 56px;
}

}

@media (max-width: 1300px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 46px;
}

}

@media (max-width: 1200px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 36px;
}

}

@media (max-width: 801px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 32px;
}

}

@media (max-width: 800px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 62px;
}

}

@media (max-width: 600px) {
section div.colorselector_controls_variant_tooltip {
    bottom: 32px;
}

}

section.colorselector_controls_layer li.selected{
    border: 0;
	-webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.45);
box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.45);
	-webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	transition: 0.3s linear;
}

/**
 * Color/Variant menu item Text - currently not used, because Tooltip Takes care
 * of displaying Color/Variant name
 */
section.colorselector_controls_layer li a{
    display: none;
}



/**
 * Print Button
 */
div.colorselector_print_button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAqCAYAAAAnH9IiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFQjNFNTY5ODVBRTExMUU1QjQ4QUNBOTJDMjIzQzdBMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFQjNFNTY5OTVBRTExMUU1QjQ4QUNBOTJDMjIzQzdBMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMDBFNEY1NUFFMTExRTVCNDhBQ0E5MkMyMjNDN0ExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMDBFNEY2NUFFMTExRTVCNDhBQ0E5MkMyMjNDN0ExIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OdjcaQAABF1JREFUeNrsWUtIW1EQncSoEdEQjD8U7SLFv1AQRRSF6sKCqF0ILoqWShE3ai0o7uqmC/FHN+6sUjdddOHGUj9VRFwoLjRKu0mpfzDi///J7cw1eSZFX17Mxwc6MLz3bib3njd37sy59ynAsbxBrUYNQzWDa0L/X0b9gfoFdYUx5nQnCge/d2RmZtY1NTVBYmIiXFxc3BmtQqGAs7MzmJmZgaGhIRgcHASTydSIoFvAjfJMp9Oxzc1N5gkxGAwsISGB3NxO3nZGxeRtTk4O86RsbW2x5ORkp4GrRED7+Pn5CQ+rq6vQ3NzMp5im2lm5vLyEiooKyMvLE9q0Wi1MTExAVlbWO+oTAdW7Gh5VOIDglbm5OfKIS9rZ2Xmjx3d2dhiuGbJpk+JppdQ38PHxgcDAQJe8YDtztqLRaGBychL0en09evyjo36U4EURCysCPjIyAiEhIU1olyMb0I4kJiYGampqwFIX5AF6enraoQ0tVvR2GXr7yW02Km+C7uvrg/j4eCgtLQV/f39hYdF6CQ0N5dfo6GhITU2F0dHRp/iXv/cOmtJlQ0MDtLS02IEmwAMDAxAVFcWBBwQEkLmvLDxtFayyds+np6dgNl/TGkvVY7JeiJQKnSlYssoeDw50IupL1OOTk5N7AXVwcECXIAyZYlS92ELMoKSOCb4iIiKCL4b09PR7AY2UFY6Pj7/S4lxeXqZ4/4TNXYjpt63dK+QVDFkcp4vIyLjaysLCAiMbV0nTTYpOYghOGMs6PimyS1ZbW8swRZLtCyufDvf19WW9vb2i3Hd+fp6RnSdAYwVkS0tLouN3dHQwzOFkr6bwqC4sLITy8nLRKUPAEBsbC0dHR3fi07duGjEEwsLCeFGxlb29PTtmWVdXB/39/TA2NvaaRp8bHh5OsSXnt5F46sjdwvmxUgnBwcH8SjI+Pg6VlZW8avb09EBaWhpv7+7upvafdL+OwuQkJSUlQuhUVVUJ7fgy1LagvJohs6zycEFBAfc6Vcrc3Nzr/GyZCZUciwd6F5KSkvg6ysjI+J+TyBM0SXZ29iP3eAT9YEBLXojn5+ewsrLCK5i7KyJlCdpqqVQq94I2Go2Qn5/vkTIeHh7OzzwIuFTQKilvSGXcZDLxzanbpxvHl1Lg1Go1p0EU0/tra2uSTodoGj0SowhayuwtLi7SZYtc3FVcXNwaFxdnd2hOniWi0tra6tZwkCKNjY0wNTVlNy692OzsLN12Eeg25LIDqNF4b3vUH4sv8dnbgK0nUUhBn98Qyn+wlButwfzLonYUwHJoInj+8PDQIyD39/ftYtoSu2oE+N3Z7KGwsioSnU7HifhdD9XF+DRx6aCgILv1AyLfg8RAX+DmUniIjIwE3PJ4JTwcnTCJSYpWq2UbGxte3QDQFweNRkOAY+7yzcWwvb3dVlRU9B6F7+M8uVmg/SAVsPb2dtjd3f2A4JZujVsJ/ZXB1SG3Dlz/+OmIB61bzje+iRn+E2AAMOeIN7l7ZjEAAAAASUVORK5CYII=);
    width: 45px;
    height: 42px;
    cursor: pointer;
	display:none;
}

li[data-colorselector-variant_id="worksurface_hardwood"] {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3e2c7+0,f2c179+16,d8a85b+45,cea456+48,d8b877+50,f2c179+76,d8a85b+81,e9d4b3+100 */
background: #f3e2c7!important; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f3e2c7 0%, #f2c179 16%, #d8a85b 45%, #cea456 48%, #d8b877 50%, #f2c179 76%, #d8a85b 81%, #e9d4b3 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f3e2c7 0%,#f2c179 16%,#d8a85b 45%,#cea456 48%,#d8b877 50%,#f2c179 76%,#d8a85b 81%,#e9d4b3 100%)!important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f3e2c7 0%,#f2c179 16%,#d8a85b 45%,#cea456 48%,#d8b877 50%,#f2c179 76%,#d8a85b 81%,#e9d4b3 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 )!important; /* IE6-9 fallback on horizontal gradient */
}

li[data-colorselector-variant_id="worksurface_stainless-steel"] {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
background: #f5f6f6!important; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%)!important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 )!important; /* IE6-9 fallback on horizontal gradient */
}

li[data-colorselector-variant_id="workbench_stainless-steel"] {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
background: #f5f6f6!important; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%)!important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 )!important; /* IE6-9 fallback on horizontal gradient */
}

li[data-colorselector-variant_id="workbench_eggshell"] {
	background-image:url(assets/workbench/eggshell.png)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}

li[data-colorselector-variant_id="workbench_stainless-steel"] {
	background-image:url(assets/workbench/stainless.jpg)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}

li[data-colorselector-variant_id="worksurface_white"] {
	background-image:url(assets/workbench/white.png)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}

li[data-colorselector-variant_id="worksurface_phenloic"] {
	background-image:url(assets/workbench/resin.jpg)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}

li[data-colorselector-variant_id="worksurface_hardwood"] {
	background-image:url(assets/workbench/hardwood.jpg)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}

li[data-colorselector-variant_id="worksurface_stainless-steel"] {
	background-image:url(assets/workbench/stainless.jpg)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;

}


canvas#canvas_colorSelectorInstance.colorselector_canvas {
	width: 50%;
	float: left;
}
div#colorSelectorInstance_controls.colorselector_controls {
	width: 50%;
	float: left;
}



@media (max-width: 800px) {

canvas#canvas_colorSelectorInstance.colorselector_canvas {
	width: 100%;
	float: none;
}
div#colorSelectorInstance_controls.colorselector_controls {
	width: 100%;
	float: none;
}
}

div#colorSelectorInstance.colorselector {
	max-width:100%!important;
}
section.colorselector_controls_layer.worksurface div.colornote {
	display:none;
}

section.colorselector_controls_layer.workbench div.colornote {
	padding-top:20px;
	font-size:smaller;
	padding-left:140px;
}

@media (max-width: 800px) {
section.colorselector_controls_layer.workbench div.colornote {
	padding-left:90px;
}

}