/* CSS Document */

body
{
	margin:0;
	padding:0;
}

a
{
	outline: 0 !important;
}


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

#simulationcanvas
{
	background:url('../images/lamp-right-bg.jpg') bottom right no-repeat;
}

#simulationcanvas, #transition, #yourobjective, #help
{
	display:none;
}

#simulationcanvas.illumination-left
{
	background:url('../images/lamp-left-bg.jpg') 4px bottom no-repeat;
}

#patienthistory, #transition, #yourobjective
{
	background:url(../images/bg-blue.png) no-repeat;
}

#patienthistory .patient-photo
{
	position:absolute;
	width:366px;
	height:366px;
	overflow:hidden;
	border-radius:183px;
	-webkit-box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	-moz-box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	left:35px;
	top:65px;
	z-index:3;
}

.story
{
	z-index:2;
	position:absolute;
	background:rgba(255,255,255,.8);
	-webkit-box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	-moz-box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	box-shadow: 1px 1px 12px 2px rgba(0,0,0,0.17);
	width:533px;
	right:0;
	top:160px;
	padding:21px 35px 21px 123px;
	font-size:.99em;
}

.story h2
{
	margin-top:0;
	padding-top:0;
	color:#5d8dac;
	font-weight:normal;
	font-size:28px;
}

.story hr
{
	margin:0 0 10px -123px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#608fad+0,608fad+100&1+55,0+100 */
	background: -moz-linear-gradient(left,  rgba(96,143,173,1) 0%, rgba(96,143,173,1) 55%, rgba(96,143,173,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(96,143,173,1)), color-stop(55%,rgba(96,143,173,1)), color-stop(100%,rgba(96,143,173,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(96,143,173,1) 0%,rgba(96,143,173,1) 55%,rgba(96,143,173,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(96,143,173,1) 0%,rgba(96,143,173,1) 55%,rgba(96,143,173,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(96,143,173,1) 0%,rgba(96,143,173,1) 55%,rgba(96,143,173,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(96,143,173,1) 0%,rgba(96,143,173,1) 55%,rgba(96,143,173,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608fad', endColorstr='#00608fad',GradientType=1 ); /* IE6-9 */
	height:1px;
	border-top:none;
}

#patienthistory .btn-view-objective
{
	display:block;
	position:absolute;
	right:55px;
	bottom:35px;
	padding:10px 20px;
}

#transition img
{
	display:block;
	position:absolute;
	left:205px;
	bottom:0;
}

#yourobjective .story
{
	left:0;
	right:auto;
	top:109px;
	padding:21px 200px 21px 31px;
	width:580px;
	font-size:.95em;
}

#yourobjective .bigPatientButton
{
	display:block;
	text-indent:-9999px;
	background:url(../images/examine-eye-rebecca.png);
	height:493px;
	width:523px;
	position:absolute;
	right:0;
	bottom:0;
	z-index:3;
}

#help
{
	background:url(../images/tutorial.jpg);
}



.btn-fullscreen
{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-9999px;
	z-index:10;
}

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

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

/* Text */

.textcontainer
{
	position:absolute;
	left:20px;
	top:15px;
	width:200px;
	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;
}

#help .textcontainer
{
	width:270px;
	line-height:normal;
}

/* Microscope View */
#scopecontainer
{
	border:1px solid #ccc;
	width:390px;
	height:390px;
	overflow:hidden;
	position:absolute;
	left:219px;
	top:8px;
	border-radius:195px;
	z-index:2;
}

.flipped
{
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#scopeimagecontainer
{
	position:relative;
}

#diffuseoverlay
{
	position:relative;
	width:390px;
	height:390px;
	z-index:99;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+33,0.05+45,0.5+75 */
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(33%,rgba(0,0,0,0)), color-stop(45%,rgba(0,0,0,0.05)), color-stop(75%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.5) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.5) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	display:none; /** hidden by default **/
}

.scopeimage
{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.scopeimage-darken
{
	position:absolute;
	top:0;
	left:0;
	width:1162px;
	height:864px;
	background-color:rgba(0,0,0,.6);
	z-index:2;
}

#scopeimage1
{
	z-index:1;
}

#scopeimage2
{
	z-index:3;
}

#scopeimage3
{
	z-index:2;
	opacity:.5;
}

/** Masking **/
#scopecontainer2 img
{
	-webkit-mask-image: url(../images/mask-test.png);
	-o-mask-image: url(../images/mask-test.png);
	-moz-mask-image: url(../images/mask-test.png);
	mask-image: url(../images/mask-test.png);
}

#scopecontainer .canvasholder
{
	width:400px;
	height:250px;
	position:absolute;
	left:0;
	top:0;
}

#scopecontainer .canvasholder canvas
{
	width:400px;
	height:250px;
}

#joystickcontainer
{
	width:206px;
	height:160px;
	position:absolute;
	bottom:3px;
	left:312px;
	border-radius:20px;
	z-index:900;
}

.joystick-inner
{
	width:206px;
	height:160px;
	position:relative;
}

.joystick-pad
{
	width:100%;
	height:130px;
	position:absolute;
	z-index:1;
	background-color:rgba(255,255,255,0.8);
	border:1px solid #aaa;
	border-radius:20px;
	left:0;
	bottom:0;
}

.joystick
{
	width:100px;
	height:100px;
	/*background:url(../images/sample.jpg);*/
	position:absolute;
	left:53px;
	top:15px;
	cursor:move;
	z-index:10 !important;
}

.joystick-image
{
	width:93px;
	height:159px;
	background:url(../images/joystick.png);
	position:absolute;
	z-index:2;
	left:56px;
	top:175px;
}

#copyright
{
	position:absolute;
	right:30px;
	bottom:10px;
}

a.followjoystick.btnUp,
a.followjoystick.btnUp:hover,
a.followjoystick.btnUp:active,
a.followjoystick.btnUp:focus,
a.followjoystick.btnDn,
a.followjoystick.btnDn:hover,
a.followjoystick.btnDn:active,
a.followjoystick.btnDn:focus
{
	position:absolute;
	z-index:11;
	background:url(../images/arrows.png) top left no-repeat;
	text-indent:-999px;
	overflow:hidden;
	width:16px;
	height:44px;
	box-shadow:none;
	padding:0;
	border:none;
}

a.followjoystick.btnDn,
a.followjoystick.btnDn:hover,
a.followjoystick.btnDn:active,
a.followjoystick.btnDn:focus
{
	background-position:-16px 0;
}

/** Green Buttons **/
.btnToggleSide
{
	position:absolute;
	top:90px;
	left:30px;
	right:auto;
	z-index:3;
}

.illumination-left .btnToggleSide
{
	right:30px;
	left:auto;
	width:140px;
}

.btn-default, .btn-default:focus, .btn-default:hover, .btn-default:active
{
	border:none;
	text-shadow:none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5ecd7+0,b3c385+100 */
	background: rgb(229,236,215); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(229,236,215,1) 0%, rgba(179,195,133,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,236,215,1)), color-stop(100%,rgba(179,195,133,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5ecd7', endColorstr='#b3c385',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	-moz-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	line-height:1em;
	color:#000;
}


.btn-close-help, .btn-close-help:hover, .btn-close-help:active, .btn-close-help:focus
{
	display:block;
	position:absolute;
	background: rgb(254,236,207); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,236,207,1) 32%, rgba(252,187,86,1) 66%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,rgba(254,236,207,1)), color-stop(66%,rgba(252,187,86,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,236,207,1) 32%,rgba(252,187,86,1) 66%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,236,207,1) 32%,rgba(252,187,86,1) 66%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,236,207,1) 32%,rgba(252,187,86,1) 66%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,236,207,1) 32%,rgba(252,187,86,1) 66%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feeccf', endColorstr='#fcbb56',GradientType=0 ); /* IE6-9 */
	top:40px;
	right: 0px;
	font-weight:bold;
}


.btn-help
{
	display:block;
	position:absolute;
	top:370px;
	left:75px;
	font-size:.95em;
}

.illumination-right .btn-help
{
	left:620px;
	top:374px;
}

/** Controls **/
#controlscontainer
{
	position:relative;
	top:0;
	left:0;
	width:830px;
	height:500px;
}

#toggleMagnification
{
	width:84px;
	height:84px;
	background:url(../images/magnification_arrows.png) 8px 0 no-repeat;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	left:auto;
	right:27px;
	top:139px;
	padding-top:17px;
	position:absolute;
}

.illumination-left #toggleMagnification
{
	left:25px;
	right:auto;
}

.illumination-arrows
{
	height:50px;
	width:20px;
	text-align:center;
	position:absolute;
	top:424px;
	left:580px;
}

.illumination-arrows.right
{
	left:797px;
}

.illumination-left .illumination-arrows
{
	top:420px;
	left:18px;
}

.illumination-left .illumination-arrows.right
{
	left:239px;
}

.illumination-arrows .inner
{
	position:relative;
	height:50px;
}

a.arrow
{
	background:url(../images/arrows-updown.png) left top no-repeat;
	display:block;
	width:14px;
	height:13px;
	position:absolute;
	top:0;
	left:3px;
}

.filter-arrows
{
	position:absolute;
	height:20px;
	width:94px;
	left:86px;
	top:466px;
}

.illumination-right .filter-arrows
{
	left:656px;
	top:472px;
}

.filter-arrows .inner
{
	position:relative;
	width:100%;
	height:100%;
}

.filter-arrows a.arrow
{
	background:url(../images/arrows-leftright.png);
	width:20px;
	height:20px;
	display:block;
	position:absolute;
	left:0;
	top:0;
}

.filter-arrows a.arrow.right
{
	background-position:-20px 0;
	position:absolute;
	right:0;
	left:auto;
	top:0;
}

#filter-display
{
	background:url(../images/filter-colors.png);
	height:7px;
	width:53px;
	position:absolute;
	left:20px;
	top:7px;
}

#filter-display.blue
{
	background-position:0 -7px;
}

#filter-display.green
{
	background-position:0 -14px;
}

a.arrow.down
{
	background-position:left -13px;
	bottom:0;
	top:auto;
}

a.arrow.disabled
{
	opacity:.3;
}

.illumination-arrows span.numbers
{
	display:block;
	position:absolute;
	top:14px;
	width:20px;
	text-align:center;
	text-shadow:none;
	color:#fff;
}


.btnVideo
{
	position:absolute;
	top:60px;
	left:30px;
}

.btnFilters
{
	position:absolute;
	top:60px;
	left:150px;
}


/** Testing Filters **/
#eyeimage2 /* fail */
{
	filter:contrast(1.7);
	-webkit-filter:contrast(.3);
}


/** Start with controls hidden **/
#simulationcanvas.controls-hidden #scopecontainer, 
#simulationcanvas.controls-hidden #joystickcontainer, 
#simulationcanvas.controls-hidden #controlscontainer
{
	display:none;
}

#scopeclickhere
{
	background:url(../images/scope_clickhere.jpg);
	width:353px;
	height:399px;
	position:absolute;
	left:235px;
	top:101px;
}

.scopeclickhere_btn
{
	background:url(../images/caret.png) 88px 24px no-repeat;
	width:193px;
	height:102px;
	padding:35px 30px;
	text-align:center;
	display:block;
	position:absolute;
	color:#fff;
	text-transform:uppercase;
	left:83px;
	top:54px;
}

.scopeclickhere_btn:hover
{
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;
	color:#b3c385;
}

.btn-objective, .btn-objective:hover, .btn-objective:focus, .btn-objective:active
{
	display:block;
	position:absolute;
	right:28px;
	top:37px;
	z-index:100;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d0d9df+0,9fbccd+100 */
	background: rgb(208,217,223); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(208,217,223,1) 0%, rgba(159,188,205,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,217,223,1)), color-stop(100%,rgba(159,188,205,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(208,217,223,1) 0%,rgba(159,188,205,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(208,217,223,1) 0%,rgba(159,188,205,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(208,217,223,1) 0%,rgba(159,188,205,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(208,217,223,1) 0%,rgba(159,188,205,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d9df', endColorstr='#9fbccd',GradientType=0 ); /* IE6-9 */
	width:140px;
}

/** Video Screen **/
#simulationcanvas.videocanvas
{
	background:url(../images/patient-1-video-bg.jpg) top right no-repeat;
}

.videocanvas .textcontainer
{
	width:350px;
	font-size:.9em;
	left:30px;
	top:30px;
}

.videocanvas .videocontainer
{
	padding:16px;
	border-radius:10px;
	
	background: rgb(229,236,215); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(229,236,215,1) 0%, rgba(179,195,133,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,236,215,1)), color-stop(100%,rgba(179,195,133,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(229,236,215,1) 0%,rgba(179,195,133,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5ecd7', endColorstr='#b3c385',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	-moz-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.17);
	line-height:1em;
	color:#000;
	
	position:absolute;
	left:30px;
	top:121px;
	z-index:8;
}

.videocanvas .btn-objective, .videocanvas .btn-objective:hover, .videocanvas .btn-objective:active, .videocanvas .btn-objective:focus
{
	right:20px;
	top:22px;
	padding:6px 8px;
}

.videocontainer #vid
{
	margin:0;
	padding:0;
}

/** Video Controls **/
#videocontrols
{
	position:relative;
	width:320px;
	background:#808f4e;
	height:24px;
}

.video-btn
{
	background:url(../images/video-controls.png);
	height:24px;
	width:23px;
	display:block;
	text-indent:-999px;
	overflow:hidden;
}

.video-btn.replay
{
	width:27px;
	position:absolute;
	left:0;
	top:0;
}

.video-btn.playpause
{
	position:absolute;
	left:27px;
	top:0;
}

.video-btn.playpause.play
{
	background-position:-27px 0;
}

.video-btn.playpause.pause
{
	background-position:-49px 0;
}

.video-btn.fullscreen
{
	background-position:-73px 0;
	width:30px;
	position:absolute;
	right:0;
	top:0;
}

#seek1, #seek2
{
	color:#fff;
	font-size:10px;
	display:block;
	position:absolute;
	left:54px;
	top:5px;
}

#seek2
{
	left:auto;
	right:36px;
}

#seekbar
{
	background:#4a4a4a;
	width:158px;
	height:10px;
	border-radius:5px;
	position:absolute;
	left:88px;
	top:6px;
}

#seekbar a.seek
{
	display:block;
	position:absolute;
	left:0;
	top:0;
	background:#fff;
	text-indent:-999px;
	overflow:hidden;
	width:10px;
	height:10px;
	border-radius:5px;
	cursor:pointer !important;
}