body{
	background:#000;
	overflow: hidden;
}

#base {
	position: relative;
	max-width:1000px;
	margin: 0 auto;
}

#backImg {
	width: 100%;
	height: 100%;
	z-index: 0;
}

#goo_canvas {
  width: 500px;
  height: 500px;
	max-width: 100%;
	max-height: 100%;
  display: inline-block;
}

.drag {
	cursor: move;
}

.hover {
	cursor: url("../img/circle.cur") 8 8, pointer;
}

#top_canvas {
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}

.shadow {
	-moz-box-shadow: 2px 2px 10px #000;
	-webkit-box-shadow: 2px 2px 10px #000;
	box-shadow: 2px 2px 10px #000;
}

#resImgLeft {
	position: absolute;
	width: 40px;
	height: auto;
	top: 60px;
	right: 255px;
	margin-top: -15px;
	z-index: 3;
}

#resImgRight {
	position: absolute;
	width: 40px;
	height: auto;
	top: 60px;
	right: 25px;
	margin-top: -15px;
	z-index: 3;
}

#resolution-slider {
	position: absolute;
	width: 150px;
	height: 10px;
	top: 60px;
	right: 85px;
	z-index: 3;
}

#scaleImgLeft {
	position: absolute;
	width: 40px;
	height: auto;
	top: 120px;
	right: 255px;
	margin-top: -15px;
	z-index: 3;
}

#scaleImgRight {
	position: absolute;
	width: 40px;
	height: auto;
	top: 120px;
	right: 25px;
	margin-top: -15px;
	z-index: 3;
}

#scale-slider {
	position: absolute;
	width: 150px;
	height: 10px;
	top: 120px;
	right: 85px;
	z-index: 3;
}

#toggleImgLeft {
	position: absolute;
	width: 40px;
	height: auto;
	top: 180px;
	right: 255px;
	margin-top: -15px;
	z-index: 3;
}

#toggleImgRight {
	position: absolute;
	width: 40px;
	height: auto;
	top: 180px;
	right: 145px;
	margin-top: -15px;
	z-index: 3;
}

#toggle-slider {
	position: absolute;
	width: 30px;
	height: 10px;
	top: 180px;
	right: 205px;
	z-index: 3;
}

#previewBox {
	position: absolute;
	bottom: 10%;
	right: 200px;
	width: 150px;
	height: 150px;
	background-color: gray;
	border: 1px solid #666;
}

#colorBox {
	position: absolute;
	bottom: 10%;
	right: 20px;
	width: 150px;
	height: 150px;
	background-color: gray;
	border: 1px solid #666;
}

.color {
	position: static;
	width: 100%;
	height: 100%;
	background-color: gray;
	padding: 0px;
	z-index: 3;
}

.info {
	position: absolute;
	width: 100%;
	height: 45px;
	bottom: 0px;
	background-color: white;
	padding: 0px;
	z-index: 3;

	font-family: Neuzeit, monospace;
/* 	font-style: normal; */
/* 	font-weight: bold; */
	font-variant: normal;
	font-size: 9pt;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	text-indent: 0ex;
}

.info .r {
	position: relative;
	left: 5px;
	top: 3px;
}

.info .g {
	position: relative;
	left: 5px;
	top: 5px;
}

.info .b {
	position: relative;
	left: 5px;
	top: 7px;
}

.info .hex {
	position: relative;
	left: 95px;
	top: -33px;
}

/* --- Slider --- */
.ui-slider-horizontal .ui-state-hover {
	outline-style: none !important;
}

.ui-slider-horizontal .ui-state-focus {
	outline-style: none !important;
}

.ui-slider-horizontal .ui-state-default {
    border: none !important;
    width: 20px !important;
    height: 17px !important;
    padding-right: -10px !important;
    background: transparent !important;
}

.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
    background: none !important;
}

#slider-horizontal, .ui-slider {
    border: 1px solid #aaa !important;
    -moz-box-shadow: inset 3px 4px 5px #888;
	-webkit-box-shadow: inset 3px 4px 5px #888;
	box-shadow: inset 3px 4px 5px #888;
    background: #ccc !important;
}

.customSlider {
	position: relative;
	width: 29px;
	height: 20px;
	left: -6px;
	top: -1px;
}