.txtw {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.txtb {
color: #000;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tw {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.tb {
color: #000;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.bgtw {
background-color: #fff;
}
.bgtb {
background-color: #565656;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
}
.left {
float: left;
}
.right {
float: right;
}
.odd {
background: #f5f6fa;
}
.even {
background: #fcfdfd;
}
.clear:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.shake {
animation: shake 1s ease-in-out;
animation-delay: 1s;
}
@keyframes shake {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-10px);
}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(-10px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.highlight {
padding: 2px 5px;
border-radius: 3px;
background: #f2f3f4;
}
.highlight span {
color: #777;
}
.btnw
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
color:#fff !important;
margin-top : 25px;
}
.color_wrapper{
padding: 0;
width: 20%;
float: left;
}

.color{
width: 100%;
padding-top: 75%;
background-color: #000;
transition: padding-top 0.5s;
position: relative;
overflow: hidden;
}

.color_tools{
padding-right: 0.5em;
padding-bottom: 0.2em;
float: left;
width: 100%;
color: #efefef;
}

.color_tools h3{
float: left;
margin-right: 0.5em;
font-size: 0.5em !important;
text-align:center;
color:#000;
}

.color_tools .btn{
float: left;
margin-top: 1.1em;
opacity: 0.2;
transition: opacity 0.5s;
border-color: transparent;
}
.color_wrapper .btn:hover, .btn.active{
opacity: 1;
}
.btn-circle {
display: inline-block;
width: 2em;
height: 2em;
position: relative;
margin-right: 0.5em;
background-position: 50%;
text-align: center;
padding: 0;
line-height: 2em;
border-radius: 1em;
background: transparent;
border: 0;
cursor: pointer;
}
#sred, #sgreen, #sblue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#tbox {
width: 100%;
height: 60px;
margin-top: 5px;
margin-left: 0px;
background-image: none;
}
#scyan, #smagenta, #syellow, #sblack {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#scyan .ui-slider-range { background: #29cfcf; }
#scyan .ui-slider-handle { border-color: #29cfcf; }
#smagenta .ui-slider-range { background: #ef29ef; }
#smagenta .ui-slider-handle { border-color: #ef29ef; }
#syellow .ui-slider-range { background: #efef29; }
#syellow .ui-slider-handle { border-color: #efef29; }
#sblack .ui-slider-range { background: #393939; }
#sblack .ui-slider-handle { border-color: #393939; }
#sred .ui-slider-range { background: #ef2929; }
#sred .ui-slider-handle { border-color: #ef2929; }
#sgreen .ui-slider-range { background: #8ae234; }
#sgreen .ui-slider-handle { border-color: #8ae234; }
#sblue .ui-slider-range { background: #729fcf; }
#sblue .ui-slider-handle { border-color: #729fcf; }
@media (min-width: 1200px) 
{
.color_wrapper{
padding: 0;
width: 20%;
float: left;
}
.color{
width: 100%;
padding-top: 75%;
background-color: #000;
transition: padding-top 0.5s;
position: relative;
overflow: hidden;
}
.color_tools{
padding-right: 0.5em;
padding-bottom: 0.2em;
float: left;
width: 100%;
color: #efefef;
}

.color_tools h3{
float: left;
margin-right: 0.5em;
font-size: 0.8em !important;
color:#000;
text-align:center;
}

.color_tools .btn{
float: left;
margin-top: 1.1em;
opacity: 0.2;
transition: opacity 0.5s;
border-color: transparent;
}

.color_wrapper .btn:hover, .btn.active{
opacity: 1;
}

.btn-circle {
display: inline-block;
width: 2em;
height: 2em;
position: relative;
margin-right: 0.5em;
background-position: 50%;
text-align: center;
padding: 0;
line-height: 2em;
border-radius: 1em;
background: transparent;
border: 0;
cursor: pointer;
}

}

.search-input {
// background-color: #fbfcfd;
border-color: #fff;
border-style: solid;
border-width: 1px 0 1px 1px;
border-radius: 3px 0 0 3px;
color: #777;
font-family: 'verdana','geneva','deja vu','trebuchet ms',sans-serif;
font-size: 14px;
font-weight: bold;
height: 38px;
line-height: normal;
padding: 0 0 0 20px;
// width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}


.code {
color: #67717d;
width: 100%;
}
.code code {
background: #f7f8fa;
border-left: 5px solid #e4e5e7;
display: block;
font-family: Consolas, menlo, monaco, monospace;
font-size: 12px;
overflow: hidden;
padding: 10px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
#color-picker {
background: 0;
border: 0;
position: absolute;
}
//#header,
#article,
#footer {
width: 100%;
}
.wrap {
margin: 0 auto;
max-width: 1000px;
padding: 0 15px;
position: relative;
}
.main {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 20px;
position: relative;
text-align: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.main section {
position: relative;
margin: 0 0 30px 0;
}
.main section h3 {
color: #222529;
font-size: 15px;
margin-bottom: 5px;
}
.main section:last-child {
margin: 0;
}
.main section.gradients {
margin-top: 15px;
}
@media screen and (max-width: 460px) {
.wrap {
padding: 0 10px;
}
.main {
padding: 10px;
}
}
@media screen and (max-width: 320px) {
.wrap {
width: 320px;
}
}

#logo {
margin: 0 auto;
}
#logo a {
background-image: url("logo.svg");
background-image: url("logo.svg"), none;
background-attachment: scroll;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
//display: block;
height: 47px;
// margin: 0 auto;
padding-top: 10px;
//text-indent: 52px;
width: auto;
cursor:pointer;
text-decoration:none;
}
#header-title {
color: #67717d;
font-size: 25px;
font-weight: 400;
margin: 15px auto 20px auto;
}
@media screen and (max-width: 680px) {

}
@media screen and (max-width: 540px) {

#header-title {
margin: 10px auto 15px auto;
}
}
#article {
background-attachment: scroll;
background-color: transparent;
// background-image: url("../i/bg-pattern.min.svg"), none;
background-position: 50% -110px;
background-repeat: no-repeat;
//padding: 50px 0 30px 0;
padding: 20px 0 10px 0;
width: 100%;
}
@media screen and (max-width: 680px) {
#article {
padding-top: 40px;
}
}
@media screen and (max-width: 540px) {
#article {
padding-top: 30px;
}
}
#search {
padding: 0 0 50px 0;
width: 100%;
}
#search form {
position: relative;
}
#search p {
padding-right: 120px;
position: relative;
}



#gtco-footer { padding: 10em 0 2em !important;}
.terminalIcon-0-2-28{width:12px;height:12px;display:inline-block;border-radius:50%;background-color: #ff0000}
.terminalIconCenter-0-2-29{margin-left:6px;background-color:#00aaef}
.terminalIconRight-0-2-30{margin-left:6px;background-color:#27c93f}
.color-codes-list:last-child{ border-bottom:0px; }
.color-codes-list{ padding:0px 0 20px 0px; margin-bottom:0px; }
.color-codes-list h2{ color: #fff; display: block; font-size: 21px; padding:5px 7px 7px; margin: 0 0 7px; border:0px; background:#089de3; }
.color-breakdown-table{ border-left:1px solid #C5C5C5; border-right:1px solid #C5C5C5; border-top:1px solid #C5C5C5; }
.color-breakdown-table th{ text-align:center; border-right:1px solid #C5C5C5; }
.color-breakdown-table tr{ border-bottom:1px solid #C5C5C5; border-top:none;  }
.color-breakdown-table tr.even{ background:#f1fbff }
table.color-breakdown-table{ width:100%; }
table.color-breakdown-table td, table.color-breakdown-table th{ padding:5px; text-align:center; }
@media (max-width:479px)
{
table.color-breakdown-table{  }
table.color-breakdown-table, table.color-breakdown-table td, table.color-breakdown-table tr, table.color-breakdown-table tbody, table.color-breakdown-table th{ display:block; border-collapse:collapse; width:100%; }
table.color-breakdown-table td, table.color-breakdown-table th{ border-right:none; overflow:hidden; clear:both; padding:5px; }
.color-codes-list h2{ font-size:18px; }
.color-codes-list h2 span{ font-size:20px; }
}
@media (max-width:639px)
{
.color-breakdown-table{ text-align:center; }
}
#doc { -webkit-print-color-adjust: exact; }
/* *html */ .yui-picker-bg {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/picker_mask.png', sizingMethod='scale');
}
.yui-picker-panel { background:#e3e3e3;border-color:#888}
.yui-picker-panel .hd{background-color:#ccc;font-size:100%;line-height:100%;border:1px solid #e3e3e3;font-weight:bold;overflow:hidden;padding:6px;color:#000}
.yui-picker-panel .bd {background:#e8e8e8;margin:1px;height:200px}
.yui-picker-panel .ft {background:#e8e8e8;margin:1px;padding:1px}
.yui-picker {position:relative}
.yui-picker-hue-thumb { cursor:default;width:18px;height:18px;top:-8px;left:-2px;z-index:9;position:absolute}
.yui-picker-hue-bg{-moz-outline:0;outline:0 none;position:absolute;left:200px;height:183px;width:14px;background:url(img/hue_bg.png) no-repeat;top:4px}
.yui-picker-bg{-moz-outline:0;outline:0 none;position:absolute;top:4px;left:4px;height:182px;width:182px;background-color:#F00;background-image:url(img/picker_mask.png)}
/* *html*/ .yui-picker-bg{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/picker_mask.png',sizingMethod='scale')}
.yui-picker-mask{position:absolute;z-index:1;top:0;left:0}.yui-picker-thumb{cursor:default;width:11px;height:11px;z-index:9;position:absolute;top:-4px;left:-4px}
.yui-picker-swatch{position:absolute;left:240px;top:4px;height:60px;width:55px;border:1px solid #888}
.yui-picker-websafe-swatch{position:absolute;left:304px;top:4px;height:24px;width:24px;border:1px solid #888}
.yui-picker-controls{position:absolute;top:72px;left:226px;font:1em monospace}.yui-picker-controls .hd{background:transparent;border-width:0!important}
.yui-picker-controls .bd{height:100px;border-width:0!important}
.yui-picker-controls ul{float:left;padding:0 2px 0 0;margin:0}
.yui-picker-controls li{padding:2px;list-style:none;margin:0}
.yui-picker-controls input{font-size:.85em;width:2.4em}
.yui-picker-hex-controls{clear:both;padding:2px}
.yui-picker-hex-controls input{width:4.6em}
.yui-picker-controls a{font:1em arial,helvetica,clean,sans-serif;display:block;*display:inline-block;padding:0;color:#000}
#container { position: relative; background: #eeeeee; width: 420px; height:220px;}
#container .yui-picker-controls li {list-style: none; font-size: 1.4em}
#container .yui-picker-hex-controls input {font-size: 1.4em}
.yui-picker-bg {-moz-outline:none; outline:0px none; position:absolute; top:4px; left:4px; height:182px; width:182px; background-color:#F00; background-image:url(img/picker_mask.png);}
@media all and (max-width: 479px) {
#container { width:100%; height:335px; }
#yui-picker-websafe-swatch { left:240px; top:80px; }
#yui-picker-controls { left:4px; top:200px; }
}
@media all and (max-width: 576px) {
#bits tr td { width:20px; padding:5px 0px; }
}
@media all and (min-width: 577px) {
.dtable { width:500px; }
.dtable tr td:first-child {	width:90px; }
#bits { width:350px; }
}
.table1 { line-height:1 }
.table1 tr td { width:30px; height:30px }
.dtable th { position:sticky; top:0; background:#f0f0f0; }
#wrapper a {
line-height: 2;
}
#wrapper p {
margin-top: 2px;
margin-bottom: 2px;
}
#wrapper table {
margin-bottom: 5px;
}
#wrapper th {
background: #e0e0e0;
font-style: normal;
}
#wrapper td {
padding-right: 5px;
padding-left: 5px;
}
#wrapper ul,
ul ul {
font-size: 1em;
list-style-position: outside;
}
#wrapper li {
margin-top: 2px;
}
#rcol li {
margin-left: -11px;
}
#wrapper h1,
h2,
h3 {
font-weight: 400;
}
h1 {
margin-bottom: 4px;
padding-bottom: 0;
color: #333;
}
h1 {
font-size: 1.8em;
margin-top: 0;
}
h2 {
font-size: 1.4em;
letter-spacing: 0;
margin-top: 10px;
margin-bottom: 3px;
}
h3 {
font-size: 1.4em;
letter-spacing: 0;
margin-top: 10px;
margin-bottom: 3px;
}
h4 {
font-size: 1.1em;
margin-top: 5px;
margin-bottom: 2px;
font-weight: 700;
}
h5 {
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 2px;
font-weight: 700;
}
h6 {
font-size: 1.1em;
color: #333;
font-weight: 400;
font-style: italic;
margin-top: 3px;
margin-bottom: 0;
}
#rcol h5 {
font-size: 0.9em;
font-weight: 700;
margin-top: 5px;
margin-bottom: 2px;
background: #e0e0e0;
padding: 5px 5px 5px 10px;
}
.yui-picker-controls input {
width: 4.7em !important;
}
.div-center
{
text-align: center;vertical-align: middle;line-height: 90px;
}
.car-wrap
{
width: 100%;
margin: 0 auto;
line-height: 0;
background: var(--carf-color);
}
.sofa
{
width: auto;
background: url("img/sofa.jpg") no-repeat;
background-size: 100% auto;
}
.sofa svg
{
mix-blend-mode: multiply;
}
#product-svg2
{
width: auto;
background: url("img/tshirt.jpg") no-repeat;
background-size: 100% auto;
}
#productImage1
{
width: auto;
background: url("img/base.png") no-repeat;
background: var(--car-color);
background-size: 100% auto;
}

.bio-image-wrapper {
border-radius: inherit;
transform: scale(.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
transform-origin: 0 100%;
overflow: hidden;
width: 100%;
height: 100%;
transition: transform .2s ease-out;
}
*, ::after, ::before {
box-sizing: border-box;
}
#mycolor {
background-color: #ffcccb;  //#fbfcfd;
border-color: #e3e3e3;
border-style: solid;
border-width: 1px 0 1px 1px;
border-radius: 3px 0 0 3px;
color: #777;
font-family: "verdana", "geneva", "deja vu", "trebuchet ms", sans-serif;
font-size: 14px;
font-weight: bold;
height: 38px;
line-height: normal;
padding: 0 0 0 40px;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#search-submit {
background: #cb504d;
background-image: url("/img/search.png");
//  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3e%3cg fill='none' stroke='white' stroke-width='2' %3e%3ccircle cx='4.8' cy='4.8' r='3.8'/%3e%3cpath d='M7.4 7.4l4 4'/%3e%3c/g%3e%3c/svg%3e"),        linear-gradient(to top, #cf482e, #e95d3e);
background-position: 50% 50%;
background-repeat: no-repeat;
text-indent: -9999px;
border-radius: 0 3px 3px 0;
border: 0;
box-shadow: 0 -3px 0 0 #892c17 inset;
color: #fff;
cursor: pointer;
font-family: "verdana", "geneva", "deja vu", "trebuchet ms", sans-serif;
font-size: 16px;
height: 38px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
top: 0;
width: 120px;
transition: opacity 0.2s linear;
-webkit-font-smoothing: inherit;
}
#search-submit:active {
box-shadow: 0 3px 0 0 #892c17 inset;
background-position: 50% 60%;
}
#search-reset {
background: 0;
border: 0;
color: #ccc;
cursor: pointer;
display: block;
font-size: 16px;
height: 32px;
line-height: 32px;
margin: 0;
padding: 0;
position: absolute;
right: 125px;
text-align: center;
top: 0;
width: 30px;
}
#search-reset:hover {
color: #000;
}
.main-search {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
//padding: 10px;
position: relative;
text-align: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 680px) {
#search {
padding-bottom: 40px;
}
}
@media screen and (max-width: 540px) {
#search {
padding-bottom: 30px;
}
#search p {
padding-right: 60px;
}
#search-submit {
width: 60px;
}
#search-reset {
right: 65px;
}
}
#navigation {
margin-bottom: 5px;
position: relative;
text-align: center;
width: 100%;
}
#navigation li {
display: inline-block;
font-size: 12px;
margin: 3px 4px;
}
#navigation a {
border: 1px solid transparent;
color: #069;
display: block;
padding: 6px 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
position: relative;
}
#navigation a:hover {
border: 1px solid #8ea7b4;
border-radius: 30px;
}
#navigation a.active {
border-bottom: 1px solid #8ea7b4;
}
@media screen and (max-width: 768px) {
#navigation li {
margin: 3px 1px;
}
#navigation a {
padding: 6px;
}
}
@media screen and (max-width: 400px) {
#navigation a {
padding: 4px 5px;
}
}
.headercolor {
border-bottom: 1px solid #fff;
margin: 0 0 10px 0;
}
.headercolor h1 {
border-bottom: 1px solid #ddd;
color: #4d5763;
font-family: "Open Sans", "Helvetica Neue", "Arial", "Verdana", "Geneva", sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.4px;
line-height: 20px;
padding: 0 0 10px 0;
text-shadow: 0 1px 0 #fff;
}
@media screen and (max-width: 360px) {
.headercolor h1 {
font-size: 16px;
}
}
.bt-header {
display: inline-block;
font-size: 12px;
position: absolute;
right: 0;
top: 0;
}
.bt-header a {
background: linear-gradient(to bottom, #fff, #f5f5f5) repeat scroll 0 0 transparent;
border-radius: 3px;
border: 1px solid #dadada;
box-shadow: 0 1px 2px rgba(135, 135, 135, 0.15);
color: #069;
content: "&#x2C5";
display: block;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
.bt-header a:before {
content: "\25BC";
}
.description {
border: 0;
color: #777;
color: #67717d;
font-size: 14px;
line-height: 26px;
margin: 0 0 10px 0;
}
.light-description {
color: #9da3ab;
font-size: 14px;
line-height: 26px;
margin: 20px auto 30px auto;
text-align: center;
width: 90%;
}
.large-description {
border: 0 none;
color: #67717d;
font-size: 24px;
line-height: 26px;
font-family: "Open Sans", "Helvetica Neue", "Arial", "Sans Serif";
font-weight: 300;
text-align: center;
margin: 30px 0;
}
.color-description {
background: #f5f6fa;
margin-top: 10px;
padding: 10px;
}
.color-description p {
color: #67717d;
font-size: 14px;
padding: 10px;
text-align: center;
}
.ellipsis {
height: 52px;
overflow: hidden;
position: relative;
transition: all 0.2s ease-in;
}
.ellipsis:after {
background: transparent linear-gradient(to right, transparent, #fff 40%, #fff) repeat scroll 0 0;
bottom: 0;
content: "...";
display: block;
padding-left: 10px;
position: absolute;
right: 0;
width: 50px;
}
.ellipsis:hover {
height: 78px;
}
.ellipsis:hover:after {
display: none;
}
@media screen and (max-width: 768px) {
.light-description {
width: 100%;
}
.ellipsis,
.ellipsis:hover {
height: auto;
}
.ellipsis:after {
display: none;
}
}
.equal:after,
.sep:after {
bottom: 0;
color: #ddd;
font-size: 30px;
font-weight: bold;
height: 30px;
line-height: 30px;
margin: 100px 50px;
margin: auto -20px auto auto;
position: absolute;
right: 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
top: 0;
width: 40px;
}
.sep:after {
content: "\002F";
}
.equal:after {
content: "\003D";
}
.chart-wrapper {
position: relative;
}
.chart-color {
overflow-y: hidden;
overflow-x: auto;
padding: 0;
text-align: center;
white-space: nowrap;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.wrap-color-image {
text-align: center;
}
.share-color {
display: inline-block;
height: 220px;
position: relative;
width: 170px;
}
.share-color .like {
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
position: absolute;
right: 20px;
top: 20px;
visibility: hidden;
transform: scale(0);
transition: all 0.1s linear;
}
.chart-wrapper:hover .share-color .like {
visibility: visible;
transform: scale(1);
}
.chart-wrapper .share-color:hover .like {
display: none;
}
.share-color .icon {
position: absolute;
top: 20px;
right: 10px;
opacity: 0;
visibility: hidden;
transition: all 0.1s linear;
}
.share-color:hover .icon {
opacity: 1;
right: 20px;
visibility: visible;
}
.share-color .icon li {
display: block;
margin-bottom: 15px;
}
.share-color .icon a {
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(0, 0, 0, 0.1);
color: #fff;
display: block;
height: 30px;
line-height: 30px;
opacity: 0.7;
position: relative;
text-decoration: none;
vertical-align: bottom;
width: 30px;
transition: all 0.1s linear;
}
.share-color .icon a:hover {
opacity: 1;
}
.share-color .icon span {
display: block;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
}
.wrap-color-image,
.rgb-graph,
.cmyk-graph {
display: inline-block;
height: 150px;
min-width: 200px;
padding: 10px;
position: relative;
vertical-align: top;
width: 33.333%;
}
.rgb-graph li {
width: 33.3%;
}
.cmyk-graph li {
width: 25%;
}
.color-image {
background: #fff;
border: 10px solid #fff;
box-shadow: 0 1px 1px rgba(75, 75, 75, 0.2);
display: block;
margin: auto;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.color-image img {
display: block;
}
.graph-wrapper {
background: #fff;
height: 220px;
margin: 0 auto;
overflow: hidden;
padding: 10px;
width: 190px;
}
.graph-wrapper strong {
color: #777;
display: block;
font-size: 11px;
font-weight: normal;
padding-top: 5px;
text-align: center;
}
.graph-wrapper ul {
height: 90%;
}
.graph-wrapper li {
float: left;
height: 100%;
position: relative;
}
.graph-wrapper .w,
.graph-wrapper .t,
.graph-wrapper .v {
left: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
}
.graph-wrapper .w {
bottom: 0;
height: 70%;
width: 80%;
}
.graph-wrapper .t {
background: #f5f5f5;
border-radius: 50%;
color: #aaa;
font-size: 12px;
height: 20px;
line-height: 20px;
top: 0;
width: 20px;
}
.graph-wrapper .v {
bottom: 0;
width: 5px;
}
.graph-wrapper .v span {
color: #999;
font-size: 13px;
left: 50%;
position: absolute;
top: -20px;
width: 20px;
margin-left: -10px;
}
.graph-wrapper .red .v {
background: red;
}
.graph-wrapper .green .v {
background: #0f0;
}
.graph-wrapper .blue .v {
background: #00f;
}
.graph-wrapper .cyan .v {
background: #0ff;
}
.graph-wrapper .magenta .v {
background: #f0f;
}
.graph-wrapper .yellow .v {
background: #ff0;
}
.graph-wrapper .black .v {
background: #000;
}
@media screen and (max-width: 768px) {
.equal:after,
.sep:after {
display: none;
}
}
.table-conversion {
position: relative;
text-align: left;
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
width: 49.5%;
table-layout: fixed;
}
.table-conversion abbr {
cursor: help;
border-bottom: 1px dashed #ccc;
}
.table-conversion tr {
border-radius: 3px;
color: #77787a;
font-size: 14px;
height: 40px;
margin-bottom: 5px;
padding: 5px 10px;
position: relative;
text-shadow: 0 1px 0 #fff;
}
.table-conversion .title {
border-radius: 3px 0 0 3px;
color: #5c5d5f;
font-size: 12px;
font-weight: bold;
padding-left: 10px;
text-align: left;
white-space: nowrap;
width: 130px;
}
.table-conversion .code {
padding-right: 5px;
width: 34%;
}
.table-conversion .code code {
opacity: 0.5;
padding: 5px 4px;
transition: width 0.1s linear 0, opacity 0.1s linear 0;
}
.table-conversion tr:hover code {
opacity: 1;
}
.table-conversion tr td:last-child {
border-radius: 0 3px 3px 0;
}
.table-conversion tr:nth-child(2n) th,
.table-conversion tr:nth-child(2n) td {
background: #fcfdfd none repeat scroll 0 0;
}
.table-conversion tr:nth-child(2n + 1) th,
.table-conversion tr:nth-child(2n + 1) td {
background: #f5f6fa none repeat scroll 0 0;
}
@media screen and (max-width: 768px) {
.table-conversion {
width: 100%;
}
.table-conversion .title {
padding-left: 5px;
width: 110px;
}
}
@media screen and (max-width: 400px) {
.table-conversion .code {
width: 20%;
}
}
@media screen and (max-width: 320px) {
.table-conversion tr {
font-size: 12px;
}
}
.scheme {
display: inline-block;
max-width: 100%;
padding: 0;
text-align: center;
}
.scheme strong {
clear: both;
color: #67717d;
display: block;
font-size: 12px;
font-weight: normal;
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
}
.scheme ul li {
display: inline-block;
font-size: 13px;
height: 100px;
padding: 0;
position: relative;
width: 70px;
}
.scheme ul li:first-child {
border-radius: 3px 0 0 3px;
}
.scheme ul li:last-child {
border-radius: 0 3px 3px 0;
}
.scheme ul li a {
display: block;
font-weight: 500;
height: 100%;
line-height: 100px;
opacity: 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 2;
width: 100%;
transition: opacity 0.1s linear 0;
}
.scheme ul li a:hover {
display: block;
opacity: 1;
text-decoration: none;
transition-delay: 0;
}
.scheme ul li code {
padding: 2px 4px;
}
.scheme ul li pre,
.scheme ul li span {
background: none repeat scroll 0 0 #fbfbfb;
box-shadow: 0 0 0 6px rgba(180, 180, 180, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
color: #777;
display: inline-block;
font-family: Consolas, menlo, monaco, monospace;
left: 50%;
line-height: 18px;
list-style: disc none inside;
margin-left: -75px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: left;
top: -42px;
visibility: hidden;
white-space: nowrap;
width: 150px;
z-index: 10;
transition: all linear 0.2s;
}
.scheme ul li:hover pre,
.scheme ul li:hover span {
opacity: 1;
visibility: visible;
transition-delay: 0;
top: -36px;
}
.scheme ul li pre:before,
.scheme ul li span:before {
background-color: #fbfbfb;
bottom: -5px;
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
content: "\00a0";
display: block;
height: 10px;
left: 70px;
position: absolute;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.gradients:hover .scheme ul li.current:after {
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
bottom: 10px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
content: "";
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 10px;
z-index: 1;
}
@media screen and (max-width: 995px) {
.scheme {
padding: 0;
}
.scheme ul li {
font-size: 11px;
height: 85px;
width: 75px;
}
.scheme ul li a {
line-height: 85px;
opacity: 1;
}
.scheme ul li pre {
display: none;
}
}
@media screen and (max-width: 767px) {
.scheme {
display: block;
float: none;
margin: 0 0 15px 0;
padding: 0;
width: auto;
}
.scheme ul li {
float: none;
height: 50px;
width: 100%;
}
.scheme ul li:first-child {
border-radius: 3px 3px 0 0;
}
.scheme ul li:last-child {
border-radius: 0 0 3px 3px;
}
.scheme ul li a {
line-height: 50px;
}
.scheme ul li pre {
left: 0;
margin-left: 0;
min-width: 100%;
text-align: center;
}
.scheme ul li pre:before {
left: 50%;
}
}
.schemes {
margin-top: 20px;
}
.schemes .scheme {
margin: 0 17px 20px 17px;
}
@media screen and (max-width: 995px) {
.schemes .scheme {
margin: 0 25px 15px 0;
}
}
@media screen and (max-width: 767px) {
.schemes .scheme {
margin: 0 0 15px 0;
}
}
.gradients {
text-align: center;
}
.gradients .scheme {
margin-bottom: 15px;
}
.gradients .linear {
display: block;
margin: 0 auto 15px;
max-width: 920px;
}
.gradients .linear div {
height: 100px;
border-radius: 3px;
}
.gradients .linear .code {
margin-top: 6px;
text-align: left;
}
.gradients .linear code {
padding: 6px;
white-space: pre-line;
word-spacing: normal;
word-break: normal;
}
@media screen and (max-width: 995px) {
.gradients .scheme {
position: relative;
}
.gradients .scheme ul {
overflow-x: scroll;
overflow-y: hidden;
position: relative;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
@media screen and (max-width: 767px) {
.gradients .scheme {
padding: 0;
}
.gradients .scheme:before,
.gradients .scheme:after,
.gradients .scheme li:last-child::after {
display: none;
}
.gradients .scheme ul {
overflow: initial;
position: relative;
white-space: normal;
}
.gradients .linear div {
height: 200px;
}
}
.similar {
text-align: center;
}
.similar .scheme ul li {
margin: 10px 15px 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.03), 0 0 0 10px rgba(255, 255, 255, 0.22) inset;
transition: all 0.2s linear;
width: 90px;
height: 90px;
}
.similar .scheme ul li a {
line-height: 90px;
}
.similar .scheme ul li:hover {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.06), 0 0 0 0 rgba(255, 255, 255, 0.22) inset;
}
.similar .scheme ul li,
.similar .scheme ul li:first-child,
.similar .scheme ul li:last-child {
border-radius: 50%;
}
.similar .scheme strong {
padding-top: 20px;
}
@media screen and (max-width: 995px) {
.similar .scheme {
margin: 0 0 15px 0;
}
.similar .scheme ul li {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 5px rgba(255, 255, 255, 0.22) inset;
height: 85px;
margin: 10px 6px 0;
width: 85px;
}
.similar .scheme ul li a {
line-height: 85px;
}
}
@media screen and (max-width: 767px) {
.similar .scheme ul li,
.similar .scheme ul li:first-child,
.similar .scheme ul li:last-child {
border-radius: 3px;
}
.similar .scheme ul li {
height: 50px;
width: 100%;
margin: 0 0 10px;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22) inset;
}
.similar .scheme ul li:hover {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.22) inset;
}
.similar .scheme ul li a {
line-height: 50px;
}
.similar .scheme strong {
padding-top: 0;
}
}
.index-gradient {
margin-top: 50px;
}
.index-gradient .scheme {
margin: 0;
}
.index-gradient .scheme ul li {
height: 30px;
vertical-align: middle;
transition: all 0.1s linear;
}
.index-gradient .scheme ul li a {
line-height: 30px;
}
@media screen and (max-width: 767px) {
.index-gradient .scheme ul {
overflow: hidden;
border-radius: 3px;
}
.index-gradient .scheme ul li {
height: 50px;
overflow: hidden;
}
.index-gradient .scheme ul li:nth-child(2n + 1) {
display: none;
}
.index-gradient .scheme ul li a {
line-height: 50px;
}
}
.color-blindness div {
display: block;
margin-bottom: 5px;
padding: 10px;
transition: background 0.1s linear;
}
.color-blindness div:last-child {
margin: 0;
}
.color-blindness div:hover {
background: #f9f9f9;
border-radius: 3px;
}
.color-blindness strong {
color: #67717d;
display: inline-block;
font-size: 12px;
line-height: 80px;
margin-right: 1%;
vertical-align: top;
width: 15%;
}
.color-blindness ul {
display: inline-block;
width: 83%;
}
.color-blindness li {
background-color: #fff;
border-radius: 1px;
box-shadow: 0 1px 1px rgba(75, 75, 75, 0.2);
display: inline-block;
margin-right: 2%;
overflow: hidden;
position: relative;
text-align: left;
vertical-align: top;
width: 32%;
}
.color-blindness li:last-child {
margin: 0;
}
.color-blindness li a {
display: block;
height: 100%;
opacity: 0;
text-align: center;
text-decoration: none;
width: 100%;
transition: opacity 0.1s linear;
}
.color-blindness li:hover a {
opacity: 1;
}
.color-blindness li span {
background: #fff;
color: #9da3ab;
display: block;
font-size: 12px;
line-height: 12px;
padding: 10px;
text-align: center;
vertical-align: middle;
width: 100%;
transition: all 0.2s linear;
}
.color-blindness li span.d {
display: none;
}
.color-blindness li:hover span.t {
display: none;
}
.color-blindness li:hover span.d {
display: block;
}
.color-blindness li span.c {
border-radius: 3px 3px 0 0;
font-size: 13px;
height: 50px;
line-height: 50px;
padding: 0;
position: relative;
width: 100%;
z-index: 9;
}
.color-blindness li span.t {
width: 100%;
}
.color-blindness li span.o {
display: none;
}
.color-blindness li:hover span.o {
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: block;
height: 20px;
left: 5px;
position: absolute;
top: 5px;
width: 20px;
transition: all 0.1s linear;
z-index: 3;
}
.color-blindness li:hover span.o:hover {
border-radius: 3px 0 0 0;
border: 0;
box-shadow: initial;
height: 100%;
left: 0;
top: 0;
width: 50%;
}
.color-blindness li:hover span.o:hover + a {
text-indent: -9999px;
}
@media screen and (max-width: 995px) {
.color-blindness .scheme ul li span {
display: inline-block;
}
}
@media screen and (max-width: 767px) {
.color-blindness strong {
line-height: 16px;
margin-bottom: 10px;
width: 100%;
}
.color-blindness div {
margin-bottom: 20px;
padding: 0;
}
.color-blindness ul {
width: 100%;
}
.color-blindness li {
margin-bottom: 15px;
margin-right: 0;
text-align: center;
width: 100%;
}
}
.simple-demo,
.major-demo,
.color-demo {
text-align: center;
}
.demo {
background-color: #fff;
border-radius: 1px;
display: inline-block;
padding: 20px;
position: relative;
text-align: left;
vertical-align: top;
-webkit-box-shadow: 0 1px 1px rgba(75, 75, 75, 0.2);
-moz-box-shadow: 0 1px 1px rgba(75, 75, 75, 0.2);
box-shadow: 0 1px 1px rgba(75, 75, 75, 0.2);
}
.demo img {
float: left;
margin: 0 0 10px 0;
}
.demo strong {
color: #67717d;
}
.demo p {
text-align: center;
}
.demo .code {
margin: 10px 0 0 0;
}
.simple-demo .demo {
margin: 1%;
padding: 20px;
padding: 70px 20px 20px;
width: 48%;
text-align: center;
}
.simple-demo .demo strong {
background: #67758a;
border-radius: 3px 3px 0 0;
color: #fff;
font-size: 12px;
left: 0;
padding: 10px 20px;
position: absolute;
text-align: left;
top: 0;
width: 100%;
display: block;
}
.simple-demo .demo p {
color: #67717d;
font-size: 13px;
margin-bottom: 30px;
}
.simple-demo .demo .code {
margin: 0;
}
@media screen and (max-width: 768px) {
.simple-demo .demo {
margin: 0 0 15px 0;
width: 100%;
}
}
.color-demo .demo {
margin: 5px 1% 15px;
min-height: 160px;
width: 48%;
}
.color-demo .demo strong {
display: block;
font-size: 12px;
margin: 0 0 15px;
}
.color-demo .demo p {
display: table;
font-size: 13px;
height: 60px;
margin: 0 0 15px;
text-align: center;
width: 100%;
}
.color-demo .demo p span {
display: table-cell;
vertical-align: middle;
}
.color-demo .demo p.border {
border-width: 1px;
border-style: solid;
transition: border 0.2s linear 0;
}
.color-demo .demo p.border:hover {
border-width: 5px;
}
.color-demo .demo .code {
margin: 0;
}
@media screen and (max-width: 768px) {
.color-demo .demo {
display: block;
margin: 0 0 15px 0;
width: auto;
}
}
@media screen and (max-width: 400px) {
.color-demo .demo {
min-height: auto;
padding: 10px;
}
}
.simple-demo .tiny {
margin-bottom: 30px;
}
.simple-demo .tiny ul {
border-radius: 50%;
display: inline-block;
height: 130px;
margin-right: 10px;
overflow: hidden;
vertical-align: middle;
width: 130px;
}
.simple-demo .tiny p {
display: inline-block;
margin: 10px 0 0;
}
.tiny-scheme {
transition: all 1200ms ease-in-out;
}
.tiny-scheme li {
display: inline-block;
width: 20%;
height: 130px;
}
.demo:hover .tiny-scheme {
-webkit-transform: rotate(1800deg);
-moz-transform: rotate(1800deg);
transform: rotate(1800deg);
}
.tiny-conversion li {
display: inline-block;
color: #77787a;
font-size: 11px;
width: 200px;
padding: 15px 0 15px 5px;
text-align: left;
transition: all 500ms ease-in-out;
}
.tiny-conversion span {
display: inline-block;
}
.tiny-conversion .title {
font-weight: bold;
width: 50px;
color: #5c5d5f;
font-weight: bold;
}
.demo:hover .tiny-conversion li:nth-child(1) {
padding-left: 30px;
}
.demo:hover .tiny-conversion li:nth-child(2) {
padding-left: 30px;
transition-delay: 0.1s;
}
.demo:hover .tiny-conversion li:nth-child(3) {
padding-left: 30px;
transition-delay: 0.2s;
}
.rotate {
animation: rotate 0.2s linear infinite;
}
@keyframes rotate {
0 {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.color-list {
border-collapse: separate;
border-spacing: 0 10px;
color: #777;
display: table;
font-size: 14px;
margin-top: 10px;
width: 100%;
}
.color-list a {
text-decoration: none;
}
.color-list tr:nth-child(odd) td {
background: #fcfdfd;
}
.color-list tr:nth-child(even) td {
background: #f5f6fa;
}
.color-list tr:hover td {
background-color: #edeff4;
}
.color-list tr td {
width: 8%;
}
.color-list tr td:first-child {
border-radius: 3px 0 0 3px;
text-align: center;
width: 20%;
}
.color-list tr td:first-child a {
display: block;
font-weight: 500;
padding: 10px 0;
}
.color-list tr td:first-child a.tw {
color: #fff;
}
.color-list tr td:first-child a.tb {
color: #000;
}
.color-list tr td:last-child {
border-radius: 0 3px 3px 0;
}
.color-list tr td:nth-child(2),
.color-list tr th:nth-child(2) {
padding-left: 15px;
width: 10%;
}
@media screen and (max-width: 768px) {
.color-list {
font-size: 13px;
}
.color-list tr td:nth-child(n + 3),
.color-list tr th:nth-child(n + 3) {
display: none;
}
}
@media screen and (max-width: 320px) {
.color-list {
font-size: 12px;
}
}
#footer {
margin-top: 0;
padding: 20px 0 30px 0;
}
#footer .fluid-footer {
padding: 20px 0;
border-top: 1px solid #d8d8d8;
}
#footer a {
color: #777;
text-decoration: none;
}
#footer span {
color: #777;
font-size: 12px;
margin-top: 5px;
}
#footer .about {
float: right;
text-align: right;
}
#footer .info {
float: left;
text-align: left;
}
@media screen and (max-width: 768px) {
#footer {
padding: 20px 0 10px;
}
#footer span {
width: 100%;
}
#footer .info,
#footer .about {
text-align: center;
}
}
#hintbox {
display: none;
left: 0;
padding-left: 36px;
padding-right: 120px;
position: absolute;
top: 30px;
width: 100%;
z-index: 25;
}
#hintbox ul {
background: #fff;
display: block;
padding: 0;
width: 100%;
z-index: 25;
border-radius: 0 3px 3px 0;
overflow: hidden;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#hintbox li {
position: relative;
text-align: left;
}
#hintbox li a {
color: #000;
display: block;
height: 26px;
font-size: 14px;
padding: 4px;
text-decoration: none;
}
#hintbox li.selected a,
#hintbox li a:focus,
#hintbox li a:hover {
background-color: #f5f5f5;
}
#hintbox .hex li a:before {
content: "#";
}
#hintbox .rgb li a:before {
content: "rgb ";
}
#hintbox .rgbp li a:before {
content: "rgb % ";
}
#hintbox .hsl li a:before {
content: "hsl ";
}
#hintbox li span {
border-color: transparent transparent transparent #f5f5f5;
border-style: solid none solid solid;
border-width: 0;
display: block;
height: 26px;
position: absolute;
right: 0;
top: 0;
width: 25%;
transition: all 0.1s linear;
}
#hintbox li.selected a span,
#hintbox li a:focus span,
#hintbox li a:hover span {
border-width: 13px;
}
@media screen and (max-width: 540px) {
#hintbox {
padding-right: 60px;
}
}
.wrap-g {
margin: 0 auto;
max-width: 1000px;
padding: 0 15px;
position: relative;
}
.g-top {
padding: 0;
margin-bottom: 50px;
transition: all 0.2s ease-in-out;
}
.g-top:hover {
background: #fff;
box-shadow: 0 0 0 10px #fff;
}
.g-inner-top {
background: #f5f6fa;
border-radius: 3px;
margin: 0 auto 10px auto;
max-width: 356px;
padding: 10px;
transition: all 0.3s ease-in-out;
position: relative;
}
.g-inner-top:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 540px) {
.g-top {
margin-bottom: 30px;
}
}
@media screen and (max-width: 460px) {
.wrap-g {
padding: 0 10px;
}
}
@media screen and (max-width: 320px) {
.wrap-g {
padding: 0;
width: 320px;
}
}
#comparator {
border-collapse: separate;
border-spacing: 0 10px;
color: #77787a;
font-size: 14px;
table-layout: fixed;
width: 100%;
}
#comparator tbody:not(:last-child):after {
content: "";
display: block;
height: 15px;
}
#comparator thead a {
border-radius: 3px;
display: block;
padding: 15px 10px;
text-align: center;
text-decoration: none;
}
#comparator th {
padding: 10px 10px 10px 15px;
width: 20%;
}
#comparator tbody tr:first-child th {
padding-left: 5px;
}
#comparator td {
padding: 0 2px;
width: 16%;
}
#comparator tbody tr:not(:first-child):nth-child(2n) th,
#comparator tbody tr:nth-child(2n) td {
background: #f5f6fa none repeat scroll 0 0;
}
#comparator tbody tr:not(:first-child):nth-child(2n + 1) th,
#comparator tbody tr:nth-child(2n + 1) td {
background: #fcfdfd none repeat scroll 0 0;
}
#comparator tbody tr:not(:first-child):hover th,
#comparator tbody tr:hover td {
background-color: #edeff4;
}
#comparator tbody tr th {
border-radius: 3px 0 0 3px;
}
#comparator tbody tr td:last-child {
border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 650px) {
#comparator {
overflow-x: auto;
display: block;
}
}
@font-face {
font-family: "icohexa";
src: url("../fonts/icohexa.woff?-jqhlcv") format("woff"), url("../fonts/icohexa.ttf?-jqhlcv") format("truetype"), url("../fonts/icohexa.svg?-jqhlcv#icohexa") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
font-family: "icohexa";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-google-plus:before {
content: "\ea8b";
}
.icon-facebook:before {
content: "\ea90";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-facebook {
background: #3b5998;
}
.icon-twitter {
background: #00aced;
}
.icon-google-plus {
background: #dd4b39;
}
.icon-linkedin {
background: #007bb6;
}
#support {
background: 0;
border-radius: 3px;
box-shadow: initial;
margin-right: -580px;
margin-top: 0;
padding: 0;
position: fixed;
right: 50%;
top: 280px;
width: 90px;
z-index: 20;
}
#support .icon-google-plus,
#support .icon-facebook,
#support .icon-twitter,
#support .icon-linkedin {
font-size: 18px;
line-height: 46px;
}
#support.absolute {
position: absolute;
}
#support .icon,
#support .text {
display: inline-block;
vertical-align: middle;
}
#support .icon li {
display: inline-block;
margin: 5px 0;
}
#support .icon a {
border-radius: 50%;
color: #fff;
display: block;
height: 46px;
opacity: 0.7;
position: relative;
text-decoration: none;
vertical-align: bottom;
width: 46px;
transition: all 0.1s linear;
}
#support .icon a:hover {
opacity: 1;
}
#support .icon span {
display: block;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
}
#support .text {
color: #abadaf;
font-size: 12px;
text-align: center;
padding: 0 5px;
margin-bottom: 10px;
}
#support .count {
color: #8d99ad;
display: block;
font-weight: bold;
font-size: 16px;
}
#support .close {
border-radius: 50%;
color: #818181;
display: none;
font-size: 28px;
height: 32px;
line-height: 20px;
line-height: 28px;
position: absolute;
right: 4px;
text-decoration: none;
top: 4px;
width: 32px;
}
#support .close:hover {
color: #333;
}
@media screen and (max-width: 1190px) {
#support {
background: #f2f2f2;
bottom: 15px;
box-shadow: 0 0 0 10px rgba(200, 200, 200, 0.1), 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin: 0;
opacity: 0.7;
padding: 10px 40px 10px 10px;
right: 15px;
top: auto;
width: auto;
position: fixed;
}
#support:hover {
opacity: 1;
}
#support .text {
margin: 0;
}
#support .close {
display: block;
}
#support .icon li {
margin: 0 5px;
}
}
@media screen and (max-width: 768px) {
#support {
background: 0;
bottom: 0;
box-shadow: initial;
float: left;
opacity: 1;
padding: 0 0 30px;
position: relative;
right: 0;
width: 100%;
}
#support .close {
display: none;
}
}
#cookie-consent {
background: rgba(37, 46, 57, 0.9);
bottom: 0;
color: #fff;
font-size: 14px;
padding: 7px 0;
position: fixed;
text-align: center;
width: 100%;
z-index: 999;
transition: background 0.2s linear 0;
}
#cookie-consent:hover {
background: rgba(37, 46, 57, 1);
}
#cookie-consent .wrap {
max-width: 1000px;
padding: 0 10px;
}
#cookie-consent .message {
display: inline-block;
font-size: 12px;
padding: 0 35px 0 5px;
vertical-align: middle;
}
#cookie-consent .message a {
color: #fff;
}
#cookie-consent .close {
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
color: #000;
display: inline-block;
font-weight: 700;
height: 24px;
line-height: 24px;
margin-left: -24px;
text-decoration: none;
vertical-align: middle;
width: 24px;
}
@media screen and (max-width: 768px) {
#cookie-consent .message {
font-size: 10px;
}
}
.links-list {
font-size: 14px;
padding-left: 30px;
}
.links-list li {
list-style-position: outside;
list-style-type: disc;
margin: 4px 0;
}
.dark-section:hover {
background: #565656 none repeat scroll 0 0;
box-shadow: 0 0 0 5px #565656;
}
.dark-section:hover .headercolor {
border-bottom: 1px solid #6f6f6f;
}
.dark-section:hover .headercolor h1 {
border-bottom: 1px solid #202020;
color: #e1e7ef;
text-shadow: 0 1px 0 #000;
}
.dark-section:hover .description,
.dark-section:hover .scheme strong {
color: #d4dde7;
}
.ie6 .wrap,
.ie7 .wrap {
width: 970px;
}
.ie8 .wrap {
width: 1000px;
}
.ie6 .main section,
.ie7 .main section {
width: 930px;
}
.ie6 .headercolor h1 {
width: 100%;
}
.ie6 #search p,
.ie7 #search p {
width: 950px;
padding: 0;
}
.ie6 #mycolor,
.ie7 #mycolor {
width: 788px;
height: 36px;
line-height: 36px;
}
.ie8 #mycolor {
line-height: 38px;
}
.ie6 #search-reset,
.ie7 #search-reset {
display: none;
}
.ie6 #search-submit,
.ie7 #search-submit {
top: 1px;
}
.ie8 #search-submit {
background-image: url("/img/search.png");
}
.ie6 #navigation,
.ie7 #navigation {
width: 930px;
}
.ie6 #navigation li,
.ie7 #navigation li {
display: inline;
margin: 10px 4px;
}
.ie6 #navigation li a,
.ie7 #navigation li a {
display: inline;
margin: 0;
}
.ie6 #navigation li a {
border: 1px solid #fff;
}
.ie6 .color-description {
float: left;
width: 848px;
}
.ie6 .wrap-color-image,
.ie7 .wrap-color-image,
.ie6 .rgb-graph,
.ie7 .rgb-graph,
.ie6 .cmyk-graph,
.ie7 .cmyk-graph {
height: 220px;
padding: 10px 0;
}
.ie6 .wrap-color-image,
.ie6 .rgb-graph,
.ie6 .cmyk-graph {
display: inline;
float: left;
width: 33.25%;
}
.ie6 .graph-wrapper,
.ie7 .graph-wrapper {
height: 200px;
width: 150px;
}
.ie6 .cmyk-graph li,
.ie7 .cmyk-graph li {
width: 24.5%;
}
.ie6 .schemes .scheme,
.ie7 .schemes .scheme,
.ie8 .schemes .scheme {
margin: 0 10px 15px;
}
.ie6 .scheme strong,
.ie7 .scheme strong {
padding: 0;
}
.ie7 .scheme ul li a,
.ie8 .scheme ul li a {
text-indent: -9999px;
}
.ie7 .scheme ul li:hover a,
.ie8 .scheme ul li:hover a {
text-indent: 0;
}
.ie7 .scheme ul li pre,
.ie8 .scheme ul li pre,
.ie7 .scheme ul li span,
.ie8 .scheme ul li span {
border: 1px solid #ddd;
}
.ie6 .color-conversion .code,
.ie7 .color-conversion .code {
top: 6px;
}
.ie6 .color-conversion .column li,
.ie7 .color-conversion .column li {
overflow-y: hidden;
}
.ie6 .demo,
.ie7 .demo,
.ie8 .demo {
border: 1px solid #f2f2f2;
border-bottom: 1px solid #ddd;
}
.ie6 .color-demo .demo,
.ie7 .color-demo .demo,
.ie8 .color-demo .demo {
min-height: 0;
}
.ie6 .color-demo .demo,
.ie7 .color-demo .demo {
width: 400px;
}
.ie6 .color-demo code {
width: 370px;
}
.ie6 .simple-demo .demo,
.ie7 .simple-demo .demo,
.ie6 .simple-demo .demo strong,
.ie7 .simple-demo .demo strong {
width: 405px;
}
.ie6 .index-demo .demo,
.ie7 .index-demo .demo,
.ie6 .index-demo .demo strong,
.ie7 .index-demo .demo strong {
width: 500px;
}
.ie6 .color-blindness li,
.ie7 .color-blindness li,
.ie8 .color-blindness li {
width: 30%;
border: 1px solid #f2f2f2;
}
.ie6 .share-color .like,
.ie7 .share-color .like,
.ie8 .share-color .like,
.ie6 .share-color .icon,
.ie7 .share-color .icon,
.ie8 .share-color .icon,
.ie6 #support,
.ie7 #support,
.ie8 #support {
display: none;
}
.ie6 .color-list td,
.ie7 .color-list td,
.ie8 .color-list td,
.ie6 .color-list th,
.ie7 .color-list th,
.ie8 .color-list th {
text-align: center;
}
.ie6 .main,
.ie7 .main,
.ie8 .main,
.ie6 .main-search,
.ie7 .main-search,
.ie8 .main-search,
.ie6 .index-demo .color-conversion,
.ie7 .index-demo .color-conversion,
.ie8 .index-demo .color-conversion {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.ie6 .index-gradient,
.ie6 .demo-scheme li,
.ie7 .demo-scheme li,
.ie6 .color-conversion,
.ie6 .color-blindness strong,
.ie7 .color-blindness strong,
.ie6 .color-blindness ul,
.ie7 .color-blindness ul,
.ie6 .color-blindness li,
.ie7 .color-blindness li,
.ie6 .main-search,
.ie7 .main-search,
.ie6 .main,
.ie7 .main,
.ie6 .main section,
.ie7 .main section,
.ie6 .demo,
.ie7 .demo,
.ie6 .chart-color li,
.ie7 .chart-color li,
.ie6 .scheme,
.ie7 .scheme,
.ie6 .scheme ul li,
.ie7 .scheme ul li {
float: left;
}
.ie6 .simple-demo .demo,
.ie6 .demo,
.ie6 .chart-color,
.ie6 .main-search,
.ie6 .main,
.ie6 .main section,
.ie6 .scheme,
.ie6 .scheme strong,
.ie6 .scheme ul li,
.ie6 #mycolor,
.ie6 #search-submit {
display: inline;
}