/* CSS DOCUMENT */
*{ margin: 0; padding: 0; }

body { font-size: 62.5%; font-family: Palatino, Georgia, Times, serif; background: #454545; }

#topbar { padding: 10px 10px 0 10px; background: #ccc; margin-bottom: 10px; border-bottom: 2px solid #222;}
#topbar a {text-decoration: none; color: #999; font-size: 1.4em; }
#topbar a:hover { text-decoration: underline; color: #666; }

#color_space { width: 300px; height: 352px; float: left; padding: 10px; border: 1px solid #ddd; background: #fefefe; margin-left: 10px;}
#swatch { height: 100px; width: 100px; border: 1px solid #ddd; float: left; margin-right: 10px; position: relative;}
#swatch #add_color { position: absolute; bottom: 3px; right: 3px; display: none; }

#hex_controls, #pms_controls { margin: 0 0 10px 110px; padding: 12px 10px; border: 1px solid #ddd; background: #efefef;}
#rgb_controls, #cmyk_controls { margin: 0 0 10px 0; padding: 10px; border: 1px solid #ddd; background: #efefef;}
#cmyk_controls { margin: 0;}

#hex_controls label, #pms_controls label { margin-left: 5px; font-size: 1.4em; color: #333;}
#rgb_controls label, #cmyk_controls  label { margin-right: 10px; width: 10px; display: block; float: left; line-height: 1.4em; font-size: 1.4em; color: #333;}

#hex_controls input, #pms_controls input { width: 50px; display: inline;}
#rgb_controls input, #cmyk_controls input { width: 25px; float: left;}

#shades { padding: 10px; background: #fefefe; border: 1px solid #ddd; float: left; height: 352px; margin-left: 10px; width: 215px;}
#shades table { clear: both;  margin-top: 10px; background: #efefef; border: 1px solid #ddd;  border: 1px solid #ddd;}
#shades td { width: 50px; font-size: 1.4em; line-height: 1.3em;}
#shades td.shade_color { cursor: pointer; }
#shades td.shade_label { width: 115px; padding: 0 5px;}
#shades td.add {width: 15px; padding: 0;}
#shades td.add input { display: none;}


#palette { padding: 5px; background: #fefefe; border: 1px solid #ddd; float: left; margin-left: 10px; }
#palette .colors { height: 50px; padding: 5px; border:1px solid #eee;}
#palette .colors.odd { background: #eee;}
#palette .swatch { height: 50px; width: 50px; float: left; margin-right: 10px; cursor: pointer;}
#palette table.color_list { background: #efefef; border: 1px solid #ddd; float: left; font-size: 1.2em; width: 300px; height: 50px; }
#palette table.color_list th { background: #ccc; text-align: center;  padding: 2px 4px;}
#palette table.color_list td {text-align: center;  padding: 2px 4px;}

#palette .actions { margin-left: 370px;}
#palette .actions input { float: right; margin-left: 5px;}
#palette .actions .halfway {display: none;}

/* Slider
----------------------------------*/
.slide_wrap { height: 1.4em; margin-bottom: 10px; }

.ui-slider { position: relative; text-align: left; background: #999; border: 1px solid #ccc; margin:10px 0 10px 60px; top: 7px;}
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 8px; cursor: default;  border:1px solid #999; background: #ededed; cursor: pointer;}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: 1px; }
.ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -3px; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-corner-all { -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; }