/* CSS Document */
body
{
	margin:0;
	padding:0;
}

a
{
	outline: 0 !important;
}

#simulationcanvas
{
	position:relative;
	width:830px;
	height:500px;
	background:#fff;
	border:1px solid #ccc;
	-webkit-transform:translate3d(0,0,0);
	overflow:hidden;
	margin-top:0;
	padding:0;
}

#resultscontainer
{
	position:relative;
	width:830px;
	margin-top:2em;
}

#cache
{
	width:10px;
	height:10px;
	overflow:hidden;
}

.lensmeter
{
	position:absolute;
	right:10px;	
	top:0;
	z-index:3;
}

.pointer
{
	width:41px;
	height:21px;
	position:absolute;
	top:322px;
	left:650px;
	z-index:100;
}

.powerdrum
{
	position:absolute;
	z-index:1;
	right:0;
	top:101px;
	width:490px;
	height:369px;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	background:url('../images/power3/dial_00321.png');
}

.axis
{
	position:absolute;
	left:432px;
	top:30px;
}

#drumcontrol
{
	display:block;
	background:url(../images/shim.png);
	/*border:1px solid red;*/
	position:absolute;
	width:120px;
	height:360px;
	top:104px;
	right:20px;
	z-index:102;
	cursor:pointer;
}

#axiscontrol
{
	display:block;
	background:url(../images/shim.png);
	position:absolute;
	width:272px;
	height:108px;
	top:30px;
	right:135px;
	z-index:102;
	cursor:pointer;
}

.lensmeter-disabled #axiscontrol, .lensmeter-disabled #drumcontrol
{
	cursor:default;
}


.target
{
	width:275px;
	height:275px;
	background:url(../images/target2-bg.png);
	display:block;
	position:absolute;
	top:216px;
	left:400px;
	-webkit-transform:translate3d(0,0,0);
	z-index:101;
}

.spherelines
{
	width:275px;
	height:275px;
	background:url(../images/sphere2-0.png) no-repeat;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	-webkit-transform:translate3d(0,0,0);
}

.cylinderlines
{
	width:275px;
	height:275px;
	background:url(../images/cylinder2-1.png);
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	-webkit-transform:translate3d(0,0,0);
}

.brokenlines, .brokenlines2
{
	width:275px;
	height:275px;
	/*background:url(../images/broken/broken0045.png);*/
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	-webkit-transform:translate3d(0,0,0);
}

.brokenlines.reverse img, .brokenlines2.reverse img
{
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.targetoverlay
{
	width:275px;
	height:275px;
	background:url(../images/target2-top.png);
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
}

.axiscallout
{
	width:60px;
	height:57px;
	position:absolute;
	overflow:hidden;
	left:524px;
	top:16px;
	z-index:4;
}

/*#axiscalloutimage
{
	display:block;
	z-index:1;
	position:absolute;
	left:-157px;
	top:7px;
	width:372px;
	height:372px;
}*/

#axiscalloutimage
{
	display:block;
	z-index:1;
	position:absolute;
	left:-191px;
	top:-1px;
	width:440px;
	height:440px;
}


.axiscallout .frame
{
	z-index:2;
	background:url(../images/axis-callout-frame.png);
	position:absolute;
	left:0;
	top:0;
	width:60px;
	height:57px;
}

.powercallout
{
	width:100px;
	height:100px;
	z-index:5;
	position:absolute;
	left:715px;
	top:286px;
}

#powercalloutimage
{
	display:absolute;
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
}

.powercallout .frame
{
	z-index:2;
	background:url(../images/callout-border.png);
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
}

/* Buttons */
#btnClickHere
{
	display:block;
	width:146px;
	height:118px;
	position:absolute;
	left:482px;
	top:124px;
	z-index:110;
}

/* Preload */
#preload-window
{
	position:relative;
	z-index:900;
	width:830px;
}

#preload
{
	position:absolute;
	top:250px;
	text-align:center;
	width:830px;
	color:#333;
	display:none;
}

/* Text */

#textcontainer
{
	position:absolute;
	left:20px;
	top:15px;
	width:230px;
	font-family: 'Roboto', Arial, sans-serif;
	line-height:15px; 
	z-index:5;
}

#textcontainer h1
{
	font-size:28px;
	color:#ff9b00;
	background:url(../images/underline.png) left bottom no-repeat;
	padding-bottom:5px;
	margin-top:0;
	padding-top:0;
}

#textcontainer strong, #textcontainer p strong
{
	font-weight:700;
}

#textcontainer p
{
	font-weight:400;
}

/* Eyewear */
#eyewear
{
	position:absolute;
	left:277px;
	top:118px;
	z-index:2;
}

/* Left Right Buttons */
#btnLeft
{
	background:url(../images/left-right-buttons.png);
	width:107px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:360px;
	z-index:999;
}

#btnLeft.highlight
{
	background-position:0 -59px;
}

#btnRight
{
	background:url(../images/left-right-buttons.png) -107px 0;
	width:107px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:640px;
	z-index:998;
}

#btnRight.highlight
{
	background-position:-107px -59px;
}

#btnDRP
{
	background:url(../images/drp-nrp-buttons.png) no-repeat;
	width:111px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:355px;
	z-index:998;
}

#btnDRP.highlight
{
	background-position:0 -59px;
}

#btnNRP
{
	background:url(../images/drp-nrp-buttons.png) -111px top no-repeat;
	width:111px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:640px;
	z-index:998;
}

#btnNRP.highlight
{
	background-position:-111px -59px;
}

#btnOC
{
	background:url(../images/oc-bifocal-buttons.png) 0 0 no-repeat;
	width:120px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:350px;
	z-index:998;
}

#btnOC.highlight
{
	background-position:0 -59px;
}

#btnBifocal
{
	background:url(../images/oc-bifocal-buttons.png) -120px 0 no-repeat;
	width:120px;
	height:59px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	top:10px;
	left:640px;
	z-index:998;
}

#btnBifocal.highlight
{
	background-position:-120px -59px;
}

#btnCharts
{
	background:url(../images/oc-bifocal-buttons.png) 0 -118px no-repeat;
	width:173px;
	height:54px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	bottom:25px;
	left:20px;
	z-index:998;
}

#btnInstructions
{
	background:url(../images/oc-bifocal-buttons.png) 0 -172px no-repeat;
	width:173px;
	height:54px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	position:absolute;
	bottom:25px;
	left:20px;
	z-index:998;
}

/* Progressbar */
#progressbarwrapper{
	display:block; 
	text-align:center;
	position:relative;
	padding-top:5px;
}
#progressbar{
	height: 25px;
	width: 225px;
	display:inline-block;
	border-radius: 8px;
	border: 2px solid #a3ac7d;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.ui-progressbar .ui-widget-header{
	border: 1px solid #b5bf8d;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6ead9+43,b5bf8d+97 */
	background: #e6ead9; /* Old browsers */
	background: -moz-linear-gradient(top,  #e6ead9 43%, #b5bf8d 97%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#e6ead9), color-stop(97%,#b5bf8d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e6ead9 43%,#b5bf8d 97%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e6ead9 43%,#b5bf8d 97%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e6ead9 43%,#b5bf8d 97%); /* IE10+ */
	background: linear-gradient(to bottom,  #e6ead9 43%,#b5bf8d 97%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ead9', endColorstr='#b5bf8d',GradientType=0 ); /* IE6-9 */
}