#container
{
 width: 800px;
 height: 600px;
}
#head {
	height: 20px;
	background-color: #DDDDDD;
}
#lens {
	height: 375px;
	background-color: #000000;
}
#values
{
 width: 250px;
 height: 170px;
 text-align: right;
 position: absolute;
    left: -35px;
	top: 25px;
    font-size: 12px;
}
/* .circle
{
 width: 40px;
 height: 40px;
 position: absolute;
 left: 400px;
 top: 200px;
 border-radius: 50%;
} */

  #myCanvas_1
{
 position: absolute;
 left: 253px;
 top: 20px;

} 
.common1
{
 color: white;
 font-family: arial;
 margin-right: -5px;
}
.common
{
 color: white;
     color: white;
    position: absolute;
    left: 260px;
	font-family: arial;
}
#Lens_options {
	height: 25px;
	background-color: #DFDFDF;
	line-height: 1.5;
    text-indent: 1em;
	font-family: arial;
}
#bottom {
	height: 173px;
	background-color: #666666;
}
#Distances
{
 width: 755px;
 height: 85px;
 border: 2px solid white;
 top: 75px;
 left: 10px;
 position: relative;
 background-color: #999999;
}
#slider2
{
 width: 680px;
 height: 5px;
 position: absolute;
 left: 20px;
 top: 7px;
 background:#CACACA;
 cursor: default;
 border-top: 1px solid;
 border-radius: 0px;
}
.rotate
{
  transform: rotate(90deg);
  font-family: arial;
}
.drag_ele
{
 width: 20px;
 height: 76px;
 border: 1px solid;
border-radius: 3px;
cursor: default;
background-color: #dfdfdf;
}
#drag_3
{
position: absolute;
left: 700px;
top: 0px;
outline: 50px solid transparent;
z-index:1;

}

#dragContainer
{
    width: 720px;
    height: 70px;
    position: absolute;
    top: 5px;
	left:5px;
	border: 5px solid #CACACA;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
}
#slider
{
 height: 4px;
 position: relative;
 left: 65px;
 top: 30px;
 border-radius: 10px;
 background: #CACACA;
 width: 700px;
 cursor: default;
 border-top: 1px solid;
}
#forToolTip
{
 width: 720px;
 height: 3px;
 position: absolute;
 top: 75px;
 left:5px;
 border-top: 1px solid #424040;
}
#slider>.ui-state-default,  .ui-widget-header .ui-state-default
{
    position: absolute !important;
    z-index: 2 !important;
    width: 1em !important;
    height: 1em !important;
    cursor: default !important;
    border-radius: 1.2em !important;
	background: rgb(223, 223, 223) !important;
	top: -4px !important;
	border:1px solid #000 !important;



}
 #slider2>.ui-state-default,  .ui-widget-header .ui-state-default
{
    position: absolute !important;
    z-index: 2 !important;
    width: 20px !important;
    height: 50px !important;
    cursor: default !important;
    border-radius: 3px !important;
	background: rgb(223, 223, 223) !important;	
    border: 1px solid black !important;
	text-indent:3px;
	margin: -10px !important;
    margin-top: -3px !important;
}
/* #slider>.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default   // for 1st slider(margin-left: -10px)
{
    position: absolute !important;
    z-index: 2 !important;
    width: 5px !important;
    height: 5px !important;
    cursor: default !important;
    border-radius: 5px !important;
	background: rgb(223, 223, 223) !important;
	margin-left: 0px !important;
    border: 1px solid black !important;
} */
#slider2>.ui-slider-handle:hover
{
background:#9FA0A1 !important;

}
#slider2>.ui-slider-handle:before{
	content: 'lens';
    position: absolute;
    /*left: -12px;
    top: 11px;
    right: 0;
    bottom: 10px;
	*/
	left: -3.5px;
	top: 14px;
    transform: rotate(90deg);
    font-size: 14px;
	font-weight: normal;
	font-family: arial;
    color: #000;
	line-height: 14px;
}
*:focus
{
 outline: none;
}
#slider>.ui-slider-handle:hover
{
background:#9FA0A1 !important;
border:1px solid #000 !important;
}


.ui-slider-horizontal {
    height: .2em;
}
.ui-widget {
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 0.5em;
	cursor: pointer;
	border: 0px;
}