html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* *********************************************************************** */


html,body {
	background-color: #0B0B03;
	font-size: 2.25vh;
	height: 100vh;
	margin: 0;
	padding: 0;
}


/* *********************************************************************** */


div#all-content {
	height: 100vh;
}
div#header-content {
	height: 8vh;
}
div#body-content {
	height: 90vh;
}


/* *********************************************************************** */

div.label-text,  div.label-text label, span.label-text, span.label-text label,  label {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

div#logo {
	position: absolute;
	top: 90vh;
	left: 0.5vw;
}

img {
  width: 15%;
}

/* temporary for magnification information */
div#magInfo {
    color: red;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	top: 100px;
	left: 100px;
}

div#location {
    color: white;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	top: 120px;
	left: 100px;
}
div#blurInfo {
    color: white;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	top: 80px;
	left: 100px;
}


span#part-c-instructions-container {
	display: inline-block;
	margin-top: 0.5vh;
}

span#part-c-instructions {
	position: relative;
	display: visible;
	font-size: 120%;
	font-weight: bold;
	color: yellow;
	margin-top: 0.5vh;
	margin-left: 2vw;
	margin-right: 2vw;
}

div#magnification-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	z-index: 200;
	
}

/* *********************************************************************** */

select#lens-or-mirror-dropdown-id {
	display: inline;
}

select {
	position: relative;
	top: 0.5vh;
	left: 0.5vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
}

/* *********************************************************************** */


div.draggable {
	position: absolute;
}
div.scalable {

}


/* *********************************************************************** */

div#bulb-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 20vh;
	left: 8vw;
	height: 20vh;
	width: 14vh;
	display: visible;
	background-color: transparent;
	border-style: solid;
	border-width: 0.25vh;
	border-color: transparent;
}
div#bulb-top {
	position: relative;
	border: 0;
	margin: 0;
	padding: 0;
	top: 2vh;
	left: 0vw;
	opacity: 0.7;
}
div#bulb {
	position: absolute;
}
div#bulb-circle {
	position: absolute;
	background-color: yellow;
	height: 12vh;
	width: 12vh;
	border-radius: 50%;
}
div#bulb-oval {
	position: absolute;
	background-color: yellow;
	height: 18vh;
	width: 6vh;
	left: 3vh;
	top: 0vh;
	border-radius: 50%;
}
div#bulb-shank {
	position: absolute;
	background-color: brown;
	height: 6vh;
	width: 6vh;
	left: 3vh;
	top: 14vh;
}

div#object-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 20vh;     /* moves entire object screen */
	left: 13.1vw;    /* moves entire object screen */
	display: visible;
	background-color: black;
	height: 20vh;
	width: 14vh;
	border-style: solid;
	border-width: 0.25vh;
	border-color: white;
}
div#object-crosshairs {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 2.5vh;
	left: 0.15vw;  /* just to centre in screen */
	opacity: 0.7;
}

div#lens-screen-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 20vh;        /* vertical location */   
	left: 70vw;   /*    location on track */ 
	display: visible;
	background-color: white;
	overflow: visible;
	height: 20vh;
	width: 14vh;
	border-style: solid;
	border-width: 0.25vh;
	border-color: black;
}
div#screen-extra {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	margin: 0;
	height: 20vh;
	width: 14vh;
	overflow: hidden;
	padding: 0;
	display: visible;

}
div#image-crosshairs {
	position: absolute;
	border: 0;
	margin: 0;
	height: 20vh;
	width: 14vh;
	overflow: visible;
	top: 2.5vh;
	left: 2vh;
	padding: 0;
	display: visible;
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
	filter: blur(0px);
	opacity: .7;
}

div#lens-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 20vh;
	left: 40vw; 
	height: 20vh;
	width: 14vh;
	display: visible;
	background-color: transparent;
	border-style: solid;
	border-width: 0.25vh;
	border-color: transparent;
}
div#lens {
	position: absolute;
	height: 20vh;
	width: 4vh;
	top: 0vh;
	left: 4.5vh;
	background-color: powderblue;
	border-radius: 50%;
	background-image: linear-gradient(to right, lightblue , white, lightblue);
}

div#mirror-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 20vh;
	left: 80vw;
	display: none;
	background-color: transparent;
	height: 20vh;
	width: 14vh;
	border-style: solid;
	border-width: 0.25vh;
	border-color: transparent;
}
div#mirror {
	position: absolute;
	height: 20vh;
	width: 4vh;
	top: 0vh;
	left: 3.5vh;
	border-radius: 50%;
	border-right-style: solid;
	border-width: 1.5vh;
	border-color: darkgray;
	background-image: radial-gradient(white, lightblue, lightgray);
}

div#mirror-screen-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	display: none;
}

div#horizontal-dashed-line {
	position: absolute;
	top: 2vh;
	left: 0vh;
	border-top: 1px dashed red;
	width: 14vh;
}
div#horizontal-dashed-line2 {
	position: absolute;
	top: 4vh;
	left: 0vh;
	border-top: 1px dashed red;
	width: 36vh;
}

div#vertical-dashed-line {
	position: absolute;
	top: 0vh;
	left: 2vh;
	border-left: 1px dashed red;
	height: 20vh;
}


div#vertical-dashed-line2 {
	position: absolute;
	top: 0vh;
	left: 4vh;
	border-left: 1px dashed red;
	height: 35vh;
}


div#horizontal-mesh {
	position: absolute;
	top: -3px;
	left: 0vh;
}
div#vertical-mesh {
	position: absolute;
	top: 0vh;
	left: -2px;
}

div#horizontal-mesh2 {
	position: absolute;
	top: -1vh;
	left: -1vh;
}
div#vertical-mesh2 {
	position: absolute;
	top: 0vh;
	left: -1vh;
}

div#magnified-view-container {
	position: absolute;
	overflow: hidden;
	display: visible;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-width: 0.5vh;
	height: 35vh;
	width: 35vh;
	top: 60vh;
	left: 70vw;
}
div#magnified-crosshairs {
	position: absolute;
	top: 0vh;
	left: 0.5vw;
	background-color: transparent;
	overflow: visible;
	opacity: 0.7;
}


div#instructions-container {
	position: absolute;
	display: visible;
}


/* *********************************************************************** */

div#object-target, div#mirror-container-target, div#lens-container-target, div#lens-screen-container-target, div#mirror-screen-container-target {
	position: relative;
	top: 17.75vh;
	left: 4vh;
}
div#object-target {
	visibility: visible;
}

div.dot {
	display: inline-block;
}
div.ring {
	height: 4vh;
	width: 4vh;
	background-color: none;
	border-radius: 50%;
	border-style: solid;
	border-color: red;
	border-width: 0.5vh;
}
div.up-bar {
	height: 4vh;
	width: 1.75vh;
	border-right-style: solid;
	border-color: red;
	border-width: 0.5vh;
}
div.side-bar {
	height: 1.75vh;
	width: 4vh;
	border-bottom-style: solid;
	border-color: red;
	border-width: 0.5vh;
}



/* *********************************************************************** */

div.post {
	position: relative;
	height: 11vh;
	width: 1vh;
	top: 19vh;
	left: 5vh;
	color: green;
	border-right-style: solid;
	border-width: 1vh;
	border-color: darkgray;
/*		background-image: linear-gradient(to left, darkgray, white);*/
}

div#screen-post, div#lens-post, div#mirror-post, div#object-post {
	position: relative;
}

/* *********************************************************************** */

div.indicator {
	position: absolute;
	top: -1.5vh;
	left: 0.25vw;
	border-left: 2vh solid transparent;
	border-right: 2vh solid transparent;
	border-top: 4vh solid red;
}


div.card {
	position: absolute;
	background-color: white;
	height: 20vh;
	width: 14vh;
	top: -2vh;
	left: -1.5vh;
	border-style: solid;
	border-width: 0.25vh;
}
div.object-card {
	background-color: black;
	border-color: white;
}
div.image-card {
	background-color: white;
	border-color: red;
}

/* *********************************************************************** */



div.arrow-line-vertical {
	position: absolute;
	background-color: yellow;
	height: 11.5vh;
	width: 2vh;
	top: 2vh;
	left: 4.75vh;
}
div.arrow-line-horizontal {
	position: absolute;
	background-color: yellow;
	height: 2vh;
	width: 10vh;
	top: 6.5vh;
	left: 0.75vh;
}
div.arrow-head-up {
	position: absolute;
	width: 0;
	height: 0;
	top: 0vh;
	left: 3.75vh;
}
div.arrow-head-down {
	position: absolute;
	width: 0;
	height: 0;
	top: 12vh;
	left: 3.75vh;
}
div.arrow-head-left {
	position: absolute;
	width: 0;
	height: 0;
	top: 5.5vh;
	left: -1.25vh;
}
div.arrow-head-right {
	position: absolute;
	width: 0;
	height: 0;
	top: 5.5vh;
	left: 8.75vh;
}

/* *********************************************************************** */

div.object {
	background-color: yellow;
	/*opacity: 1;*/
}
div.image {
	background-color: orange;
}
div.object-arrow-right {
	border-top: 2vh solid transparent;
	border-left: 4vh solid yellow;
	border-bottom: 2vh solid transparent;
/*	opacity: 1;*/
}
div.object-arrow-up {
	border-left: 2vh solid transparent;
	border-right: 2vh solid transparent;
	border-bottom: 4vh solid yellow;
/*	opacity: 1;*/
}
div.image-arrow-left {
	border-style: solid;
	border-color: transparent orange transparent transparent;
	border-width: 2vh 4vh 2vh 0;
}
div.image-arrow-down {
	border-style: solid;
	border-color: orange transparent transparent transparent;
	border-width: 4vh 2vh 0 2vh;
}

/* *********************************************************************** */

div.image-arrow-left-magnified {
	border-style: solid;
	border-color: transparent orange transparent transparent;
	border-width: 4vh 8vh 4vh 0;
}
div.image-arrow-down-magnified {
	border-style: solid;
	border-color: orange transparent transparent transparent;
	border-width: 8vh 4vh 0 4vh;
}
div.arrow-line-vertical-magnified {
	position: absolute;
	background-color: orange;
	height: 23vh;
	width: 4vh;
	top: 4vh;
	left: 15.5vh;
}
div.arrow-line-horizontal-magnified {
	position: absolute;
	background-color: orange;
	height: 4vh;
	width: 20vh;
	top: 13vh;
	left: 7.5vh;
}
div.arrow-head-left-magnified {
	position: absolute;
	width: 0;
	height: 0;
	top: 11vh;
	left: 4vh;
}
div.arrow-head-down-magnified {
	position: absolute;
	width: 0;
	height: 0;
	top: 23.5vh;
	left: 13.5vh;
}

/* *********************************************************************** */

div#track-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 50vh;
	left: 10vw;
	display: visible;
}

div.track {
	position: relative;
	padding: 0;
	width: 80.67727vw;
	background-color: green;
	height: 2vh;
	border-style: solid;
	border-width: 0.25vh;
	border-color: white;
}
div#track-leg-1 {
	width: 2vh;
	height: 5vh;
	border-left-style: solid;
	border-width: 0.25vh;
	top: 2vh;
	left: 10vw;
}
div#track-leg-2 {
	width: 2vh;
	height: 5vh;
	border-left-style: solid;
	border-width: 0.25vh;
	top: -3.25vh;
	left: 70vw;
}

/* *********************************************************************** */

div.majTick {
	position: absolute;
	height: 2vh;
	left: 0vw;
	border-left: 2px solid yellow;
}
div.minTick {
	position: absolute;
	height: 1vh;
	border-left: 2px solid yellow;
}
div.midTick {
	position: absolute;
	height: 1.5vh;
	border-left: 2px solid yellow;
}


div.minTick-1 {
	left: 0.67727vw;
}
div.minTick-2 {
	left: 1.3545vw;
}
div.minTick-3 {
	left: 2.0318vw;
}
div.minTick-4 {
	left: 2.7091vw;
}
div.minTick-5 {
	left: 3.3864vw;
}
div.minTick-6 {
	left: 4.0636vw;
}
div.minTick-7 {
	left: 4.7409vw;
}
div.minTick-8 {
	left: 5.4182vw;
}
div.minTick-9 {
	left: 6.0954vw;
}

div.decade {
	position: absolute;
}

div#decade-1 {
	left: 0vw;
}
div#decade-2 {
	left: 6.7727vw;
}
div#decade-3 {
	left: 13.5454vw;
}
div#decade-4 {
	left: 20.3181vw;
}
div#decade-5 {
	left: 27.0908vw;
}
div#decade-6 {
	left: 33.8635vw;
}
div#decade-7 {
	left: 40.6362vw;
}
div#decade-8 {
	left: 47.4089vw;
}
div#decade-9 {
	left: 54.1816vw;
}
div#decade-10 {
	left: 60.9543vw;
}
div#decade-11 {
	left: 67.7270vw;
}
div#decade-12 {
	left: 74.4997vw;
}

div.label-text {
	position: absolute;
	top: 3vh;
	left: -1vw;
}