/*
	
*/
:root {
	--imgwidth: 320px;
	--height: calc(var(--imgwidth) * 0.74);
	--panelwidth: calc((var(--imgwidth) * 2) + 40px);
	--width16: calc(var(--imgwidth)/16);
	--height16: calc(var(--height)/16);
}

html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
div,iframe{margin:0;padding:0;}
img{max-width:100%;height:auto;border:0;outline:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
hr{height:1px;border:0;background-color:#ccc;}
*,*:before,*:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

body {
	/*font:12px/1.2 Helvetica, Arial, sans-serif;*/
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,sans-serif;
	font-size:100%;
	font-weight:400;
	/*line-height:1.25;*/
	color: rgba(0,0,0,0.9);
	/*background-color: #242729;*/
	margin:0;
	height:100%;
}

form {
	float:left;
	width:340px;
	margin:0;
	text-align: left;
}

input, select {
	font-family:Helvetica, Arial, sans-serif;
	font-size:0.875em;
	line-height:1;
	/*font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,sans-serif;*/
}

/*select{border:1px solid rgba(0,0,0,0.2);outline:0;line-height:1.5em;}
select:focus {border-color:rgba(0,0,0,0.2);}
*/
/*select{outline:1px solid rgba(0,0,0,0.4);}
select:active{outline:1px solid rgba(0,0,0,0.4);}*/
select{outline:0;}
	
input[type="submit"],
input[type="button"] {
	padding:0.4em 1.525em 0.4em 1.5em;
	
/*	background-color:rgba(0,0,0,0.55);
	color:rgba(255,255,255,0.94);
*/	
	background-color:rgba(0,0,0,0.06);
	color:rgba(0,0,0,0.66);
	
	border:1px solid rgba(1,2,3,0.4); /*transparent*/
	border-radius:4px;
	cursor:pointer;
}
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color:rgba(0,0,0,0.09);
	/*border:1px solid rgba(0,0,0,0.1);*/
}


h1,h2,h3,h4 {font-weight:500;}

h1 {
	font-size:1.5em;
	color: rgba(0,0,0,0.80);
	margin:0.5em 0 1.5em 0;
}

h3 {
	font-size:1em;
	color: rgba(0,0,0,0.50);
	margin:0 0 0.67em 0;
}

h4 {
	font-size:1em;
	color: rgba(0,0,0,0.52);
	margin:0 0 0.34em 0;
}

.caption {
	font-size:0.84em;
	color: rgba(0,0,0,0.44);
}


p#the-image {margin:0;}

#page {
	text-align: left;
	max-width:var(--panelwidth);
	height:auto;
	margin:auto;
}

#header {
	width:98%; height:auto;
	padding:10px 10px 20px 10px;
	margin-bottom:40px;
}

#lower {
	width:100%; height:auto;
	padding-top:4em;
}

h4.palette-heading {
	font-size:12px; line-height:1.1em;
	color: rgba(0,0,0,0.5);
	margin:0.67em 0 0.34em 0;
}

.palette-container-header {
	height:2em;
	margin:0;
	padding:0 0 0.67em 0;
}
.palette-container-header h4 {position:relative; width:49%; margin:0; padding:0.67em 0 0 0;}

#flower-palettesort {
	position:relative;
	float:right;
	width:49%;
}

#color-table {width:var(--imgwidth); height:var(--height);}
.color-table {cursor:pointer;}
.prow { float: left;  padding: 0; margin: 0; width:var(--imgwidth); }
.prow li { float: left; padding: 0; margin: 0; list-style: none;}
.prow li span { display: none; }

#l1, #l2 { width: calc(var(--imgwidth) + 20px); float: right; }
#lower > #l1, #lower > #l2 { width: calc(var(--imgwidth) + 20px); float: right; }

.palette-container {
	float:left;
	width: var(--imgwidth);
	height:auto;
	margin:0 0 0 10px;
}

#l2 img { width: var(--imgwidth); }

#median-palette-- {
	float:left;
	width: var(--imgwidth);
	height:auto;
	margin:2px 0 0 10px;
}
.palette-swatch {float:left;width:20px;height:20px;}


#flower-palette-- {
	float:left;
	width: var(--imgwidth);
	height:auto;
	margin:24px 0 0 10px;
}

#flowers-palette, #dominate-colors-palette {
	width: var(--imgwidth); height:auto;
}

#l11, #l22 { padding: 10px; }

#select-image {
	float:right;
	width:88px;
	height:66px;
	padding:1px;
}

#instructions {
	position:relative;
	float:left;
	margin-top:30px;
}

#instructions h4 {text-align:left;color:#3f3f3f;}

#instructions ol li {padding-bottom:0.5em;}
#instructions ol li ul {list-style: none inside; padding:0.4em 0 0 0.5em;}
#instructions ol li ul li::before {
  content: "- ";
}
#instructions ol li ul li {font-size:0.8 !important;}

div#color-select {margin:0.67em 0;padding:1em 0 0 0;}
p.instruct {margin:0.5em 0;font-size:0.75em;color:rgba(0,0,0,0.5);}
p.color-select {margin:0.5em 0 0.67em 0;}
p.color-select span {font:12px/1em Consolas,Menlo,monospace; word-spacing:-0.25em;color:rgba(0,0,0,0.95);}
span#curcolor,span#selcolor {width:18px;height:16px;}


#dominant-color {
	float:right;
	width:18px;height:16px;
}
#dominant-swatch {
	width:18px;height:16px;
}

.dominant-swatch {width:24px;height:24px;}

.palette-container-header {
	height:2em;
	margin:0;
	padding:0 0 0.67em 0;
}
.palette-container-header h4 {position:relative; width:49%; margin:0; padding:0.67em 0 0 0;}

#flower-palettesort {
	position:relative;
	float:right;
	width:49%;
}

#error,
#thanks,
#current {
	padding: 4px 10px;
	color: #fff; 
	font-weight: 700;
	font-size: 10px;
}

#error {background: red;}

#thanks {background: green;}

#current {
	/*background: #fafafa;*/
	color: #333; 
	clear: both;
	margin-top: 1px;
	_height: 1px;
	padding: 10px 20px;
	text-align: center;
}

#tag {
	text-align: right;
	margin: 0;
	padding: 0 0 15px 0;
}


.wrapper {
	max-width: 940px;
	min-height: 100%;
	overflow: auto;
	margin: 0 auto;
	padding: 0;
	/*background-color: #303336;*/
	/*border: #7a7c80 1px solid;*/
	border-top: none;
}

.content {
	position: relative;
	float: left;
	width: 780px;
	/*min-height: 100%;*/
	/*margin: 0 auto;*/
	padding: 50px 25px 5px 5px;
	/*background-color: #ddd;*/
}

.footer {
	position: static;
	bottom: 0;
	/*margin: -22px auto 0 auto;*/
	height: 22px;
	width: 940px;
	/*border-top: 1pt #777 solid;*/
	/*background: #fafafa;*/
	font-size: 9px;
	font-weight: bold;
}

#hdrcontainer {
	position: relative;
	width: 940px;
	z-index: 10;
	top: 0;
	left: 0;
	height: 52px;
	width: 100%;
	/*background: #fff;*/
	/*border-bottom: 3px #292A34 solid;*/
}

#logo {
	float: left;
	height: 40px;
	width: 198px;
	margin: 7px 0 0 15px;
	/*background-image: url(media/name.png);*/
}

.menucontainer {
	position: relative;
	float: right;
	width: 140px;
	margin-left: -140px;
	top: 0px;
	left: 0px;
	font-size: 11px;
	text-align: center;
	/*border-left: 1px solid #7a7c80;
		border-bottom: 1px solid #7a7c80;*/
}

#navcontainer {
	position: absolute;
	float: left;
	top: 50%;
	/*left: 260px;*/
	height: 26px;
	width: 500px;
	padding: 0;
	margin-left: 180px;
	/*border: thin #ccc solid;*/
}

#requirements {visibility:hidden;}