File: color-pickers/SoftMoon-WebWare/MasterColorPicker2.css

Recommend this page to a friend!
  Classes of Joseph  >  JS Master Color Picker script  >  color-pickers/SoftMoon-WebWare/MasterColorPicker2.css  >  Download  
File: color-pickers/SoftMoon-WebWare/MasterColorPicker2.css
Role: Auxiliary data
Content type: text/plain
Description: default (standard) file
Class: JS Master Color Picker script
Pick colors from a palette
Author: By
Last change: tweeks and such
Date: 6 years ago
Size: 40,233 bytes
 

Contents

Class file image Download
body.MCP_init {
	cursor: wait; }

body.MCP_drag {
	cursor: move; }

body.MCP_dragMyPaletteColor {
	cursor: not-allowed; }

/*hate to do it, but MSIE10 puts us in a pickle.  Besides, the layout IS dependent on fixed-pixel canvas-graphics*/
#MasterColorPicker {
	font-family: serif;
	font-size: 16px; }  /*lock down the font-size*/
#MasterColorPicker input {
	font-family: "consolas", monospace;
	font-size: 13px; }  /*lock down the font-size.  Help keep MSIE10’s range-bar in line with others*/

#MasterColorPicker input[type="range"] {
	vertical-align: middle;  /*fix Google’s Chrome*/
	width: 12em; /*align Google’s Chrome (now Blink) and MSIE10 with the smart central-balance of Opera(12.16)’s  native size.*/
	}
#MasterColorPicker input[type="range"]:focus {
	border: none; }
/*------*
span.MCP_fix_Safari {
	background-color: lightGray;
	border-radius: 1em / .618em; }
/*------*/
#MasterColorPicker input[type="range"] {
    /*removes default webkit styles*/
    -webkit-appearance: none; }
#MasterColorPicker input[type="range"]::-webkit-slider-runnable-track {
/*    width: 12em; */
    height: 5px;
    background: #808080;
    border: none;
    border-radius: 3px; }
#MasterColorPicker input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -4px;
		border: 1px solid black;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white; }
#MasterColorPicker input[type="range"]:focus::-webkit-slider-runnable-track {
    background: lightSteelBlue; }

#MasterColorPicker input[type="range"]::-ms-fill-lower,
#MasterColorPicker input[type="range"]::-ms-fill-upper {
/*    width: 12em; */
    height: 5px;
    background: #808080;
    border: none;
    border-radius: 3px; }
#MasterColorPicker input[type="range"]::-ms-thumb {
    margin-top: -4px;
		border: 1px solid black;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white; }
#MasterColorPicker input[type="range"]::-ms-fill-lower:focus,
#MasterColorPicker input[type="range"]::-ms-fill-upper:focus {
    background: lightSteelBlue; }

#MasterColorPicker input[type="range"]::-moz-range-track {
/*    width: 12em; */
    height: 5px;
    background: #808080;
    border: none;
    border-radius: 3px; }
#MasterColorPicker input[type="range"]::-moz-range-thumb {
    margin-top: -4px;
		border: 1px solid black;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white; }
#MasterColorPicker input[type="range"]:focus::-moz-range-track {
    background: lightSteelBlue; }
/*------*/

#MasterColorPicker button {
	background-color: lightSkyBlue;
  font-variant: small-caps;
	border-radius: .618em / 1em;  }

#MasterColorPicker span.swatch {
	display: inline-block;
	width: 2.618em;
	height: 1.1618em;
	padding: 0;
	margin: 0;
	vertical-align: text-bottom; }

#MasterColorPicker_debugLog  {
	position: fixed;
	top: .618em;
	left: .618em;
	width: 37em;
	height: 27em;
	overflow: auto;  /*Opera is the only legacy browser that will properly auto-scroll this fixed-position window as a new event is logged*/
	white-space: pre;
	background-color: white;
	color: black;
	z-index: 10000; }



/* These classes are dynamically applied to ALL registered panels when you:
		• activate/deactivate the MasterColorPicker
		• click on one of the panels.
	 The one clicked on gets moved to the highest level. */
#MasterColorPicker .pickerPanelZLevel1 {z-index: 3142;}  /* adjust base level to your needs */
#MasterColorPicker .pickerPanelZLevel2 {z-index: 3143;}  /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel3 {z-index: 3144;}  /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel4 {z-index: 3145;}  /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel5 {z-index: 3146;}  /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel6 {z-index: 3147;}  /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel7 {z-index: 3148;}  /* …and so on… for each new panel you register */

#MasterColorPicker .pickerPanel:hover  {z-index: 6180;}
#MasterColorPicker .pickerPanel.dragging  {z-index: 7000;}


#MasterColorPicker input.activeInterface,
#MasterColorPicker select.activeInterface,
#MasterColorPicker textarea.activeInterface,
#MasterColorPicker button.activeInterface {
	outline: red double medium; }


#MasterColorPicker .pickerPanel {
	position: fixed;    /** DEFAULT POSITION **/
	display: none;      /** DEFAULT DISPLAY STATE (when picker is not active) **/
	padding: .382em;
	color: black;
	background-color: white;
	border: 2px solid gray;
	border-radius: .618em / 1em; }
#MasterColorPicker .pickerPanel.init,  /*older browsers require the named-color-tables be displayed while initializing/setting the swatch background colors*/
#MasterColorPicker .pickerPanel.activePicker,
#MasterColorPicker .pickerPanel.activeInterface {
	display: block;  }
#MasterColorPicker .pickerPanel.disabled {
	display: none;  }

/* These two classnames below may be added to the default HTML file as deemed by the page-developer. */
/* They are added and removed dynamically by JavaScript  when the end-user drags and “sticks/thumbtacks” a panel */
#MasterColorPicker .pickerPanel.floating {
	position: fixed;  }
#MasterColorPicker .pickerPanel.scrollable {
	position: absolute;  }

/* “expanding” panels have no set max-height based on the dynamically expanding HTML */
#MasterColorPicker .pickerPanel.expanding {
	overflow: auto;
	max-height: 85.4%;  /*  ≈ Φ + (1-Φ)*Φ;  for default position-fixed (floating) */  }
#MasterColorPicker .pickerPanel.expanding.scrollable {
	max-height: 1080px;  /* max height of most monitors */ }


/*  the <span>s are the “drag handles” for most panels (the auxilary panels).  Most stick up like file-tabs so all panels may cluster in the top-right corner… */
#MasterColorPicker h2 {
	font-size: 1.1618em;
	text-align: center; }
#MasterColorPicker h2 span {
	position: absolute;
	top: -2em;
	left: auto;
	padding: .382em;
	background-color: white;
	color: black;
	border: 2px solid gray;
	border-bottom: none;
	border-radius: .618em / 1em;
	z-index: inherit;
	cursor: move; }
#MasterColorPicker h2 span:hover {
	z-index: 6182; }
#MasterColorPicker h2 span img { /* thumbtack */
	position: absolute;
	top: -22px;
	right: -22px; }

#MasterColorPicker .pickerPanel.activeInterface {
	background-color: lightBlue; }
#MasterColorPicker .pickerPanel.activeInterface.activePickerPanel {
	background-color: lightYellow; }

#MasterColorPicker .pickerPanel:hover,
#MasterColorPicker .pickerPanel:hover h2 span {
	border-color: skyBlue; }
#MasterColorPicker .pickerPanel.activePickerPanel,
#MasterColorPicker .pickerPanel.activePickerPanel h2 span {
	border-color: red; }



#MasterColorPicker_options.pickerPanel,
#MasterColorPicker_options.pickerPanel.activeInterface,
#MasterColorPicker_options.pickerPanel.activeInterface.activePickerPanel {
	top: 0;
	right: 0;
	margin: 0;
	padding: 2.382em .618em .382em;
	color: white;
	background-color: black;
	border: none;
	border-radius: 0;
	border-top-left-radius: .618em; }
#MasterColorPicker_options > label {
	position: absolute;
	top: .27em;
	left: .618em; }
select#palette_select {
	color: black;
	background-color: white;
	position: relative; }


#MasterColorPicker_options header {
	text-align: center;
	font-weight: normal;
	font-family: serif;
	font-style: italic;
	font-size: .618em;
	cursor: move;
	white-space: noWrap; }
#MasterColorPicker_options header img { /*this is the thumb-tack when “sticking” panels to the window/page*/
	position: absolute;
	top: -22px;
	right: -22px; }
#MasterColorPicker_options header h1 {
	font-size: 1.38em;
	font-style: normal;
	font-weight: bold;
	font-variant: small-caps;
	font-family: sans-serif;
	display: inline;
	margin: 0;
	padding: 0;
	position: static; }
#MasterColorPicker_options header address {
	display: inline;
	margin: 0;
	padding: 0;
	position: static;
	font-weight: bold;
	font-family: sans-serif;
	font-style: normal;
	font-size: 1.16em; }

#MasterColorPicker_options > div {
	display: block;
	position: absolute;
	top: .27em;
	right: .618em;
/*	left: auto;
	width: auto; */
	background-color: white;
	color: black;
	padding: 0 .1em;
	border-top-left-radius: .382em;
	 }
#MasterColorPicker_options > div > h3 {
	position: relative;
	display: block;
	font-size: inherit;
	margin: 0;
	padding: 0 0 1px 0;
	background-color: inherit;
	border-top-left-radius: .382em;
	z-index: 2;  }
#MasterColorPicker_options > div div {
	display: none;
	position: absolute;
	top: 90%;
	top: calc(100% - 2px);
	right: -2px;
	left: auto;
	padding: .618em 1.618em;
	background-color: inherit;
	color: inherit;
	border-left: 2px solid gray;
	border-bottom: 2px solid gray;
	border: 2px solid gray;
	border-radius: .618em / 1em;
	border-top-right-radius: 0;
	z-index: 1; }
#MasterColorPicker_options > div:hover div,
#MasterColorPicker_options > div.activeInterface div {
	display: block; }
/*
#MasterColorPicker_options > div label {
	display: block; }
#MasterColorPicker_options > div div label {
	display: inline-block; }
 */
#MasterColorPicker_options > div div p,
#MasterColorPicker_options > div div label span {
	display: none;  }
#MasterColorPicker_options.activePicker > div div label:hover p,
#MasterColorPicker_options.activePicker > div div fieldset:hover > p,
#MasterColorPicker_options.activePicker > div div div:hover > p,
#MasterColorPicker_options > div div label:hover span {
	display: block;
	position: absolute;
	bottom: 100%;
	top: auto;
	width: 10.618em;
	margin: 0;
	padding: .618em;
	font-size: inherit;
	white-space: normal;
	background-color: white;
	color: black;
	border: 1px solid red;
	border-bottom: none; }
#MasterColorPicker_options.activePicker > div div fieldset:hover > p,
#MasterColorPicker_options.activePicker > div div label:hover p {
	top: 100%;
	bottom: auto;
	right: -1px;
	left: -1px;
	width: auto;
	border-bottom: 1px solid red;
	border-top: none; }
#MasterColorPicker_options > div div div {
	position: relative;
	padding: 0;
	margin: .618em 0;
	border: none; }
#MasterColorPicker_options.activePicker > div div div:hover > p {
	top: -0.382em;
	left: -18.618em;
	bottom: -0.618em;
	width: 17.618em;
	padding-top: .162em;
	line-height: 1.162em;
	border: 1px solid red;
	border-right: none; }
#MasterColorPicker_options > div div fieldset label:first-child {
	position: relative;
	z-index: 1; }
#MasterColorPicker_options > div div fieldset {
	z-index: 2;
	display: block;
	margin: .618em 0;
	padding: 0;
	border: none; }
#MasterColorPicker_options > div div div fieldset:last-child {
	margin-bottom: 0; }
#MasterColorPicker_options > div div fieldset:hover,
#MasterColorPicker_options > div div fieldset label:first-child:hover,
#MasterColorPicker_options > div div fieldset:first-child label:nth-child(3):hover {
	z-index: 3; }
#MasterColorPicker_options > div div fieldset label {
	display: block;
	margin: 0; }
#MasterColorPicker_options .disabled {
	opacity: .27; }
#MasterColorPicker_options > div div fieldset {
	position: relative; }
#MasterColorPicker_options > div div fieldset:first-child {
	border: 1px solid;
	margin: 0 -.854em 1em -.854em;
	padding: .382em;
	white-space: nowrap;
	opacity: .27; }
#MasterColorPicker_options.activePicker > div div fieldset:first-child {
	opacity: 1; }
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(2),
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(3) {
	display: inline; }
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(3) {
	margin-left: .2em; }
#MasterColorPicker_options > div div fieldset:first-child legend {
	font-size: 1.01618em;
	font-weight: bold; }
#MasterColorPicker_options > div div fieldset:first-child fieldset {
	margin: .382em 0;
	padding: 0; }
#MasterColorPicker_options > div div fieldset:first-child fieldset fieldset {
	margin: 0 .382em;
	padding: 0;
	display: inline-block; }
#MasterColorPicker_options > div div fieldset fieldset label {
	margin: 0 .618em; }
#MasterColorPicker_options > div div fieldset:first-child fieldset label {
	margin: 0; }
#MasterColorPicker_options > div div fieldset:first-child > label:last-child {
	position: absolute;
	top: 0;
	right: .382em;
	left: auto;
	color: black;
	background-color: white; }
#MasterColorPicker_options p span {
/*	display: inline-block; */
	white-space: noWrap;  }



#MasterColorPicker_MyPalette.pickerPanel {
	margin: 0;
	top: 2em;
	bottom: auto;
	right: 19.618em;
	left: auto;
	padding: .382em 1.618em .382em .382em; }
#MasterColorPicker_MyPalette h2 {
	margin-left: .382em;
	text-align: left; }
#MasterColorPicker_MyPalette h2 span {
	position: absolute;
	top: 3.382em;
	left: -1.27em;
	right: auto;
	padding: 0;
	border: none;
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg); }
#MasterColorPicker_MyPalette fieldset,
#MasterColorPicker_MyPalette p {
	margin-left: 1.618em; }
#MasterColorPicker_MyPalette fieldset label {
	display: block;
	padding-top: 0.382em;
	text-align: right; }
#MasterColorPicker_MyPalette button {
	margin-left: .618em; }
#MasterColorPicker_MyPalette table {
	margin: 0;
	padding: 0;
	position: relative;
	max-height: 7.618em;
	overflow: auto; }
#MasterColorPicker_MyPalette tr {
	cursor: n-resize; }
#MasterColorPicker_MyPalette tr:first-child,
#MasterColorPicker_MyPalette tr:last-child {
	cursor: auto; }
#MasterColorPicker_MyPalette td:first-child {
	cursor: pointer; }
#MasterColorPicker_MyPalette tbody.subPalette tr:first-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette tbody tr:last-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette td:first-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette td input,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody tr:last-child,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette td:first-child,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody input,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody button {
	cursor: n-resize; }
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette tr:hover td,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody.subPalette:hover th {
	/*Blink/(Webkit?) browsers: the hover state does not change until the button is released - so this does not work properly*/
	border-top: 2px solid red; }
#MasterColorPicker_MyPalette tr:hover .dragHandle {
	color: red; }
#MasterColorPicker_MyPalette .dragHandle {
	margin-left: .162em;
	position: relative; }
#MasterColorPicker_MyPalette tr:last-child .dragHandle {
	visibility: hidden; }
#MasterColorPicker_MyPalette td {
	white-space: nowrap; }
#MasterColorPicker_MyPalette tbody th {
	position: relative;
	padding: 0 0 0 .382em;
	border: 1px solid;
	border-bottom: none;
	text-align: left; }
#MasterColorPicker_MyPalette tbody th label:last-child {
	position: absolute;
	left: auto;
	right: .382em;
	top: auto;
	bottom: 0; }
#MasterColorPicker_MyPalette tbody.subPalette th label:first-child {
	display: block; }
#MasterColorPicker_MyPalette tbody.subPalette th label:first-child input {
	width: 20em; }
#MasterColorPicker_MyPalette tbody.subPalette th button {
	position: absolute;
	left: auto;
	right: .382em;
	top: 0;
	bottom: auto; }
#MasterColorPicker_MyPalette tbody.subPalette th label:nth-child(4) {
	margin-left: 1.618em; }
#MasterColorPicker_MyPalette td:first-child {
	padding: 0 1.618em 0 .382em;
	border: 1px solid; }
#MasterColorPicker_MyPalette td input[type="text"] {
	width: 17em; }
#MasterColorPicker_MyPalette .dragHandle ul {
	position: absolute;
	top: 0;
	left: 0;
	color: black;
	background-color: paleGreen;
	list-style-type: none;
	cursor: default;
	padding: .162em .27em;
	z-index: 13; }
#MasterColorPicker_MyPalette .dragHandle ul ul {
	display: none; }
#MasterColorPicker_MyPalette .dragHandle ul li:hover {
	position: relative; }
#MasterColorPicker_MyPalette .dragHandle ul li:hover ul {
	display: block;
	position: absolute;
	top: -.162em;
	left: 100%; }



#MasterColorPicker_Filter {
	margin-top: 2em;
	margin-top: calc(2em + 2px);
	top: 0;
	right: 18em; }
#MasterColorPicker_Filter h2 span {
	right: 5em; }
#MasterColorPicker_Filter fieldset {
	border: none;
	padding: 0 .162em;
	margin: 0;
	text-align: right; }
#MasterColorPicker_Filter fieldset,
#MasterColorPicker_Filter label {
	position: relative;
	z-index: 1; }
#MasterColorPicker_Filter fieldset:hover,
#MasterColorPicker_Filter label:hover {
	z-index: 2; }
#MasterColorPicker_Filter label span {
	display: none;
	position: absolute;
	top: 100%;
	bottom: auto;
	left: auto;
	right: 0;
	background-color: white;
	color: black;
	border: 1px solid red;
/*	border-top: none; */
	padding: .382em;
	width: 10em;
	text-align: left; }
#MasterColorPicker_Filter fieldset > label:last-child span,
#MasterColorPicker_Filter th:last-child label span {
	left: 0;
	right: auto; }
#MasterColorPicker_Filter label:hover span {
	display: block;  }
#MasterColorPicker_Filter label.disabled:hover span {
	display: none;  }
#MasterColorPicker_Filter table {
	margin: 0;
	padding: 0; }
#MasterColorPicker_Filter td:first-child {
	white-space: noWrap; }
#MasterColorPicker_Filter td:first-child input {
	width: 17em; }
#MasterColorPicker_Filter td:nth-child(2) input {
	width: 7em; }
#MasterColorPicker_Filter span.swatch {
	border: 2px solid black;
	margin-left: .382em; }


#MasterColorPicker_Lab {
	margin-top: 2em;
	margin-top: calc(2em + 2px);
	top: 0;
	right: 19em; }
#MasterColorPicker_Lab h2 {
	text-align: center; }
#MasterColorPicker_Lab h2 span {
	right: 10em; }
#MasterColorPicker_Lab table {
	border: 1px solid;
	margin: 0 0 .618em; }
#MasterColorPicker_Lab caption acronym:first-child {
	margin-right: 1.618em; }
#MasterColorPicker_Lab caption acronym:last-child {
	margin-left: 1.618em; }
#MasterColorPicker_Lab td {
	padding: 0;}
#MasterColorPicker_Lab table .even th,
#MasterColorPicker_Lab table .even td {
	padding-top: .382em;
	margin-top: .382em;
	border-top: 1px solid; }
#MasterColorPicker_Lab input {
	padding: 0 .162em; }
#MasterColorPicker_Lab input[type="number"] {
	width: 5.618em; }
#MasterColorPicker_Lab input[type="range"] {
	width: 16.18em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-webkit-slider-runnable-track {
	height: .618em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-ms-track {
	height: .618em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-moz-range-track {
	height: .618em; }
#MasterColorPicker_Lab tr.red input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-moz-range-track {
	background-color: red; }
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-fill-upper {
	background-color: red; }
#MasterColorPicker_Lab tr.red input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-webkit-slider-runnable-track {
	background-color: red; }
#MasterColorPicker_Lab tr.green input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-moz-range-track {
	background-color: lime; }
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-fill-upper {
	background-color: lime; }
#MasterColorPicker_Lab tr.green input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-webkit-slider-runnable-track {
	background-color: lime; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-moz-range-track {
	background-color: blue; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-fill-upper {
	background-color: blue; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-webkit-slider-runnable-track {
	background-color: blue; }

/* The thumb’s color of the Hue range is controlled with JavaScript.
 * Since its color can not be directly scripted through the DOM, this stylesheet must be dynamically altered.
 * Therefore, if you change the following CSS-descriptors, you must accordingly change the MasterColorPicker.js file.
/*******/
#MasterColorPicker_Lab tr.hue input[type="range"]::-webkit-slider-thumb {
	background-color: white; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-thumb {
	background-color: white; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-moz-range-thumb {
	background-color: white; }
/*******/

#MasterColorPicker_Lab tr.hue input[type="range"]::-moz-range-track {
	background: -moz-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
	height: .618em; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-track {
	background: -ms-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
	height: .618em; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-fill-upper {
	color: transparent;
	background-color: transparent; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-webkit-slider-runnable-track {
	background: -webkit-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
	background: -o-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
	height: .618em; }

#MasterColorPicker_Lab tr.cyan input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-moz-range-track {
	background-color: cyan; }
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-fill-upper {
	background-color: cyan; }
#MasterColorPicker_Lab tr.cyan input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-webkit-slider-runnable-track {
	background-color: cyan; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-moz-range-track {
	background-color: magenta; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-fill-upper {
	background-color: magenta; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-webkit-slider-runnable-track {
	background-color: magenta; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-moz-range-track {
	background-color: yellow; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-fill-upper {
	background-color: yellow; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-webkit-slider-runnable-track {
	background-color: yellow; }
#MasterColorPicker_Lab tr.black input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-moz-range-track {
	background-color: black; }
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-fill-upper {
	background-color: black; }
#MasterColorPicker_Lab tr.black input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-webkit-slider-runnable-track {
	background-color: black; }

#MasterColorPicker_Lab table + table.primaries th label {
	text-shadow: -1px -1px 5px gray; }
#MasterColorPicker_Lab span.swatch {
	position: absolute;
	right: .618em;
	bottom: .618em;
	left: auto;
	top: auto;
	width: 3.82em;
	height: 3.82em;
	text-align: center;
	padding-top: .382em;
	font-size: 1.618em;
	cursor: default; }



#MasterColorPicker_Gradientor {
	margin-top: 2em;
	margin-top: calc(2em + 2px);
	top: 0;
	right: 15em; }
#MasterColorPicker_Gradientor h2 span {
	right: 2em; }
#MasterColorPicker_Gradientor fieldset {
	position: relative;
	white-space: noWrap; }
#MasterColorPicker_Gradientor fieldset label {
	display: inline-block;
	text-align: center;
	position: relative; }
#MasterColorPicker_Gradientor fieldset label input,
#MasterColorPicker_Gradientor fieldset label select {
	display: block;
	margin: auto; }
#MasterColorPicker_Gradientor label:last-child {
	padding-left: 1em; }
#MasterColorPicker_Gradientor fieldset label:last-child {
	position: absolute;
	top: 100%;
	right: -1px;
	left: auto;
	border: 1px solid;
	border-top: none;
	background-color: white;
	padding: .618em; }
#MasterColorPicker_Gradientor fieldset label:last-child.disabled {
	display: none; }
#MasterColorPicker_Gradientor fieldset label span.swatch {
	position: absolute;
	top: -.382em;
	right: auto;
	left: 0; }
#MasterColorPicker_Gradientor fieldset label:nth-child(2) span.swatch {
	right: 0;
	left: auto; }
#MasterColorPicker_Gradientor fieldset label:last-child span.swatch {
	top: .2em; }
#MasterColorPicker_Gradientor div {
	padding: .618em; }
#MasterColorPicker_Gradientor canvas { border: 1px solid black; }


#MasterColorPicker_Thesaurus {
	margin-top: 2em;
	margin-top: calc(2em + 2px);
	top: 0;
	right: 20em;
	width: 28em; }
#MasterColorPicker_Thesaurus h2 span {
	right: auto;
	left: 0; }
#MasterColorPicker_Thesaurus label {
	display: block; }
#MasterColorPicker_Thesaurus input {
	width: 17em; }




#MasterColorPicker_mainPanel.pickerPanel,
#MasterColorPicker_mainPanel.pickerPanel.activeInterface,
#MasterColorPicker_mainPanel.pickerPanel.activeInterface.activePickerPanel {
	margin-top: 3.7em; /*3.618em;  3.72em;    5.57%; ≈ (100% - 85.4%) - (100% - 85.4%)*Φ */
	top: 0;
	bottom: auto;
	right: 0;
	left: auto;
	max-width: 100%;
	min-width: 17.618em;
	padding: .618em 0 0 1em;
	color: white;
	background-color: black;
	border: none;
	border-radius: 0;
	border-top-left-radius: .618em;
	border-bottom-left-radius: .618em; }


table.color_chart,
table.palette {
	border: 1px solid;
	margin-bottom: 1.618em; }
table.color_chart caption,
table.palette caption {
	color: inherit;
	background-color: inherit;
	font-size: .764em }  /* ≈ Φ + ((1-Φ) - (1-Φ)*Φ) */
table.color_chart caption h6,
table.palette caption h6 {
	font-size: 1.618em;  /*  ≈ 1/Φ = 1+Φ  */
	margin: 0;
	padding: 0; }
table.color_chart caption strong,
table.palette caption h6 {
	font-variant: small-caps; }
table.color_chart th {
	white-space: normal;
	width: auto; }
table.color_chart tr.noColor td,
table.color_chart tbody td {
	white-space: nowrap;
	font-size: 1em;
	padding: 0 0 0 .382em;
	cursor: default; }  /* you may want to use “cursor: pointer” */
table.color_chart tr.noColor td:first-child,
table.color_chart tbody td:first-child {
	width: 2.618em;
	position: relative;  }
table.color_chart tbody td:first-child div {
	display: none; }
table.color_chart tbody td:first-child:hover div {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background-color: inherit;
	padding: 2px; }
table.color_chart tbody td:nth-child(2) {
	min-width: 10.618em;  }
table.color_chart tbody td:nth-child(3) {
	font-family: "consolas", monospace, sans-serif; }
table.color_chart tfoot td {
	font-size: .7em;
	white-space: normal;
	width: 1em; /* without this, white-space acts like nowrap… */
	 }

table.palette {
	border-spacing: 0;
	border-collapse: collapse;}
table.palette table tr:first-child { }
table.palette table td:first-child {
	font-weight: bold; }
table.palette table tr:first-child td:first-child {
	font-weight: normal; }
table.palette table tr:first-child td:first-child label {
	display: inline-block;
	width: 32%;
	text-align: center; }
table.palette > tbody td {
	height: .618em;
	margin: 0;
	padding: 0;
	line-height: 1em; }
table.palette {
	position: relative; }
table.palette input {
	margin: 2px;
	padding: 0; }
table.palette mark.footmark {
	font-size: .618em;
	position: relative;
	bottom: .382em;
	top: auto;
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	background-color: inherit; }
table.palette > tfoot td {
	text-align: center; }


/* #Spectral, #BeezEye, #RainbowMaestro, #Simple², #YinYangNíHóng;   color charts after initialization  */
.picker {
	display: none;  /* JavaScript will display these when the time comes */
}
.picker:hover,
.picker.activePicker,
.picker.activePickerInterface,
.init .color_chart.picker {
	display: block; }


table#Spectral caption > span {
	position: absolute;
	top: 1em;
	right: .382em;
	padding-left: 1.382em;
	font-family: "consolas", monospace, sans-serif;
	font-size: 1.618em;
	color: inherit;
	background-color: inherit; }
table#Spectral caption > span span {
	display: block;
	position: absolute;
	top: -1em;
	right: -.382em;
	width: 1.618em;
	height: 1em;
	color: black;
	border-left: 1px solid;
	border-bottom: 1px solid; }
table#Spectral td {
	white-space: noWrap; }


table#BeezEye {
	padding-left: 7px;
	position: relative;
	overflow: hidden; /*fix Opera*/
	 }
table#BeezEye caption {
	width: 360px;
	padding-bottom: 1em; }
table#BeezEye canvas {
	width: 360px;
	height: 360px;
	margin: 0; }
table#BeezEye td {
	text-align: center;
	vertical-align: middle;
	padding: 0; }
table#BeezEye label {
	margin: 0;
	padding: 0;
	display: inline-block;  }
table#BeezEye fieldset label input {
	display: inline; }
table#BeezEye input[name='BeezEye_twist_value'],
table#BeezEye fieldset label input[name='BeezEye_curve_value'],
table#BeezEye input[name='BeezEye_value'],
table#BeezEye tr:first-child td:first-child span.MCP_fix_Safari,
table#BeezEye tr:nth-child(3) fieldset label:first-child span.MCP_fix_Safari {
	display: block; }
table#BeezEye tr:first-child td:first-child span.MCP_fix_Safari input[name='BeezEye_twist_value'],
table#BeezEye tr:nth-child(3) fieldset label:first-child span.MCP_fix_Safari input[name='BeezEye_curve_value'],
table#BeezEye input[name='BeezEye_variety'] {
	display: inline; }
table#BeezEye input[name='BeezEye_value'] {
	background-color: transparent; }

table#BeezEye fieldset {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	margin: 0;
	padding: .618em;
	text-align: left;
	overflow: visible;
	z-index: 2; }
table#BeezEye fieldset dl {
	display: none; }
table#BeezEye fieldset:hover dl {
	display: block;
	position: absolute;
	top: .618em;
	right: 100%;
	bottom: auto;
	left: auto;
	margin: 0;
	padding: .618em;
	width: 16.18em;
	font-weight: bold;
	color: white;
	background-color: rgba(0,0,0, .7); }
table#BeezEye fieldset label {
	display: block; }

table#BeezEye .disabled {
	visibility: hidden; }

table#BeezEye tr:first-child td:first-child label {
	position: absolute;
	top: 3em;
	left: 5px;
	transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
	-webkit-transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
	-moz-transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
	-ms-transform: rotate(330deg); }


table#BeezEye tr:nth-child(2) label {
	position: absolute;
	top: 13.62em;
	left: 327px;
	color: white;
	margin: 0;
	z-index: 2;
	transform: rotate(270deg);
	background: linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
	-webkit-transform: rotate(270deg);
	background: -webkit-linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
	-moz-transform: rotate(270deg);
	background: -moz-linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
	-ms-transform: rotate(270deg);
	background: -ms-linear-gradient(0deg, black, white); }

table#BeezEye tr:nth-child(2) label span {
	color: black;
	padding-left: 1.618em;  }

table#BeezEye tr:nth-child(3) td {
	position: relative; /* ignored by FireFox - but it’s whacked anyway…  */
	vertical-align: bottom;
	}
table#BeezEye tr:nth-child(3) fieldset {
	position: static;
	margin: 0 0 0 0;
	padding: 0;
	border: none;  }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
	position: absolute;
	top: auto;
	bottom: 1.618em;
	left: -5em;
	padding: 0;
	text-align: center;
	transform: rotate(315deg);
	z-index: 2; }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
	-webkit-transform: rotate(315deg); }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
	-moz-transform: rotate(315deg); }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
	-ms-transform: rotate(315deg); }

table#BeezEye tr:nth-child(3) fieldset label:last-child {
	margin: .382em;
	white-space: nowrap; }
table#BeezEye tr:nth-child(4) td:last-child {
	color: black;
	border: 1px solid;
	border-bottom-color: inherit;  }
table#BeezEye tr:last-child td {
	height: 1.618em;
	white-space: pre;
	font-family: "consolas", monospace;
	font-weight: bold;
	font-size: 1.27em; }



table#RainbowMaestro {padding-right: 1em;}  /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
table#RainbowMaestro.no_colorblind {padding-right: 0;}
table#RainbowMaestro thead {
	text-align: center; }
table#RainbowMaestro thead label {
	margin-right: .618em; }
table#RainbowMaestro thead label:last-child {
	margin-right: 0; }
table#RainbowMaestro tbody th {
	border-top: 1px solid;
	border-left: 1px solid; }
table#RainbowMaestro tbody td {
	border-left: 1px solid;
	text-align: center;
	position: relative;
	padding: 7px; }
table#RainbowMaestro tbody th:first-child,
table#RainbowMaestro tbody td:first-child {
	border-left: none; }
table#RainbowMaestro.no_colorblind .colorblind {
	display: none; }
table#RainbowMaestro canvas {
	display: block;
	position: relative;
	padding: 0;
	margin: -106px auto 0 auto;
	z-index: 2; }
table#RainbowMaestro tr:nth-child(2) td:first-child canvas {
	cursor: crosshair; }
table#RainbowMaestro div.subpalette_swatch {
	display: block;
	position: relative;
	top: 127px;
	margin: 0 auto;
	width: 106px;
	height: 106px;
	border-radius: 53px;
	z-index: 1; }
#RainbowMaestro_hueIndicator {
	position: relative; }
#RainbowMaestro_hueIndicator input {
	width: 6.618em;
	margin-left: .618em; }
#RainbowMaestro_hueIndicator span {
	display: none;
	position: absolute;
	right: 0;
	bottom: -.2em;
	left: auto;
	top: auto;
	width: 6.618em;
	padding: .2em 0 .2em 0;
	font-family: "consolas", monospace;
	font-weight: bold;
	font-size: 1.0618em;
	color: white;
	background-color: black; }
td#RainbowMaestro_swatch  {
	text-align: center;
	height: 2em;  }
span#RainbowMaestro_indicator {
	color: white;
	background-color: black;
	font-family: "consolas", monospace;
	font-weight: bold;
	font-size: 1.27em; }



table#Simple² {
	text-align: center;
	padding-right: 1em;  /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
	overflow: hidden; /*fix MSIE*/ }
table#Simple² .lft {float: left;}
table#Simple² .rt {float: right;}
table#Simple² td:nth-child(2) td:nth-child(2),
table#Simple² td:nth-child(2) td:nth-child(3),
table#Simple² td:nth-child(2) td:nth-child(4) {
	padding: 0;
	vertical-align: bottom;
	line-height: 100%; }
table#Simple² tr:nth-child(2) td:first-child,
table#Simple² tr:nth-child(2) td:nth-child(5),
table#Simple² tr:nth-child(2) td:nth-child(6) {
	padding-left: 2em;
	position: relative; }
table#Simple² tr:nth-child(3) td:first-child {
	padding: 0 0 .618em 0;
	position: relative; }
table#Simple² tr:nth-child(2) td:nth-child(2) canvas,
table#Simple² tr:nth-child(2) td:nth-child(3) canvas {
	margin: 0 2px;
	background-color: black; }
table#Simple² div,
table#Simple² label {
	position: absolute;
	width: 360px;  /* width/height of the canvas */
	margin: -.5em -195px;
	font-weight: bold;
	padding: 0;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg); }
table#Simple² tr:nth-child(3) td:first-child label {
	width: auto;
	margin: -2.618em -1.27em; } /* adjust if content changes */
table#Simple² tr:nth-child(3) td:nth-child(2) div,
table#Simple² tr:nth-child(3) td:nth-child(3) div {
	width: auto;
	margin: .5em -.382em; } /* adjust if content changes */
table#Simple² div.indicator {
	text-align: left;
	width: 3.2em;
	margin: -1.3em 0em;
	background-color: black;
	transform: rotate(290deg);
	-webkit-transform: rotate(290deg);
	-ms-transform: rotate(290deg); }
table#Simple² div#Simple²lvl.indicator {
	margin: -1.7em -.5em;
	border: 1px dotted; }

table#Simple² tr:nth-child(5) td:nth-child(3),
table#Simple² tr:nth-child(7) td:nth-child(3) {
	padding: .1em 0 .2em 0; }
td#Simple²indicator {
	padding: .2em;
	font-family: "consolas", monospace;
	font-weight: bold;
	font-size: 116.18% }

table#YinYangNíHóng {
	padding-right: 1em;  /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
}
table#YinYangNíHóng h6 span {
	display: block;
	padding-left: 4.618em;
	font-size: 85.4%; }   /* ≈ Φ + (1-Φ)*Φ */
table#YinYangNíHóng thead tr {
	position: relative;
	z-index: 618; }
table#YinYangNíHóng thead td {
	width: 33.3% }
table#YinYangNíHóng label {
	display: block;
	text-align: center; }
table#YinYangNíHóng label dfn {
	display: none; }
table#YinYangNíHóng label:hover dfn {
	display: block;
	position: absolute;
	top: 100%;
	left: .618em;
	color: white;
	background-color: black;
	border: 1px solid;
	border-top: none; }
table#YinYangNíHóng td:nth-child(2) label:hover dfn {
	left: 7.618em; }
table#YinYangNíHóng td:last-child label:hover dfn {
	left: auto;
	right: .618em; }
table#YinYangNíHóng tbody td {
	position: relative;
	text-align: center; }
table#YinYangNíHóng tbody td div {
	position: relative;
	display: inline-block; }
table#YinYangNíHóng canvas:nth-child(2) {
	display: block;
	position: absolute;
	top: 62px;
	left: 167px; }
table#YinYangNíHóng canvas:nth-child(3) {
	display: block;
	position: absolute;
	top: 82px;
	left: 82px; }
td#YinYangNíHóng_indicator {
	height: 2em;
	padding: .2em;
	font-family: "consolas", monospace;
	font-weight: bold;
	font-size: 116.18%;
	text-align: center; }

table#YinYangNíHóng tfoot {
	font-size: .7em; }
table#YinYangNíHóng tfoot dfn {
	font-weight: bold; }

div#paletteLoadingAlert {
	position: fixed;
	min-width: 27.618em;
	top: 38.2%;
	left: 38.2%;
	right: auto;
	left: calc(50% - 13.809em);
	padding: .618em;
	border: 1px solid;
	background-color: white;
	color: black;
	z-index: 7000; }
div#paletteLoadingAlert.disabled {
	display: none; }
div#paletteLoadingAlert h3 {
	color: black;
	text-align: center;
	padding: 0;
	margin: 0; }
div#paletteLoadingAlert > div {
	max-width: 19.618em;
	font-size: 1.618em;
	font-weight: bold;
	color: red;
	padding-top: .618em;
	text-align: center;  }
div#paletteLoadingAlert > div span {
	display: block;
	font-size: .618em; }
div#paletteLoadingAlert strong {
	font-variant: small-caps;
	text-decoration: underline; }
div#paletteLoadingAlert pre {
	font-size: .72em;
	min-height: 10em; }
div#paletteLoadingAlert pre .loaded {
	color: green;
	font-weight: bold; }
div#paletteLoadingAlert pre .reload {
	color: orange;
	font-weight: bold; }
div#paletteLoadingAlert pre .failed {
	color: red;
	font-weight: bold; }