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: #0B0B61;
	font-size: 2.25vh;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}


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


div#all-content {
	height: 100vh;
}
div#header-content {
	height: 8vh;
}
div#body-content {
	height: 70vh;
}
div#footer-content {
	height: 10vh;
	margin-top: 2vh;
}


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


div.label-text, div.label-text label, span.label-text, span.label-text label, input[type="radio"].label-text, input[type="radio"].label-text label, label {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

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

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

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


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

span#convex-or-concave-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	color: yellow;
	padding-bottom: 1vh;
}

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

select#convex-or-concave-dropdown-id {
	display: inline;
}

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

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


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

}

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

div#track-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 50vh;
	left: 10vw;
	display: inline;
}
div#bulb-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 8vw;
	display: inline;
}
div#object-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 13vw;
	display: inline;
}
div#eye-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 45vw;
	display: inline;
}
div#convex-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 40vw;
	display: none;
}
div#concave-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 40vw;
	display: none;
}
div#screen-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	//left: 54vw;
	left: 57vw;
	display: inline;
}


div#image-container {
	position: relative;
	border: 0;
	margin: 0;
	height: 20vh;
	width: 12vh;
	//clip-path: inset(16.2vh 1.35vh 6.2vh 12.7vh);
	overflow: hidden;
	top: -13.25vh;
	left: 0vh;
	padding: 0;
	display: inline;
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
	filter: blur(0px);
}
div#magnified-view-container {
	position: absolute;
	overflow: hidden;
	display: inline-block;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-width: 0.5vh;
	height: 35vh;
	width: 35vh;
	top: 60vh;
	left: 70vw;
	//z-index: -2;
}

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

div#image-distance-container {
	position: absolute;
	display: inline;
	height: 0.25vh;
	width: 10vh;
	top: 0vh;
	left: 0vh;
}
div#object-distance-container {
	position: absolute;
	display: inline;
	height: 0.25vh;
	width: 10vh;
	top: 0vh;
	left: 0vh;
}


div#object-target, div#concave-container-target, div#convex-container-target, div#screen-container-target, div#eye-container-target {
	position: relative;
	top: 17vh;
	left: 3.25vh;
}
div#object-target {
	visibility: hidden;
}



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


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#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: 12vh;
}


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


div#eye {
	position: absolute;
	height: 20vh;
	width: 8vh;
	top: -1.5vh;
	left: 1.625vh;
	background-color: powderblue;
	border-radius: 50%;
	background-image: linear-gradient(to right, lightblue , white, lightblue);
	border: 2px solid yellow;
}
div#eye-text {
	position: absolute;
	top: -4.5vh;
	left: 3.125vh;
}
div#convex {
	position: absolute;
	height: 20vh;
	width: 5vh;
	top: -1.5vh;
	left: 3.125vh;
	background-color: powderblue;
	border-radius: 50%;
	background-image: linear-gradient(to right, lightblue , white, lightblue);
}
div#concave {
	position: absolute;
	top: -2vh;
	left: 0.75vh;
}

div.concave-ellipse {
	position: absolute;
	height: 20vh;
	width: 4vh;
	border-radius: 50%;
	background-color: #0B0B61;
}
div#concave-ellipse-1 {
	position: absolute;
	left: 0vh;
}
div#concave-ellipse-2 {
	position: absolute;
	left: 6vh;
}
div#concave-rectangle {
	position: absolute;
	height: 20vh;
	width: 6vh;
	left: 2vh;
	background-color: powderblue;
	background-image: linear-gradient(to right, lightblue , white, lightblue);
}


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


div.post {
	position: relative;
	height: 10vh;
	width: 1vh;
	top: 18vh;
	left: 4vh;
	border-right-style: solid;
	border-width: 1.5vh;
	border-color: darkgray;
}

div#screen-post, div#convex-post, div#concave-post, div#eye-post, div#object-post {
	position: relative;
}


div.distances {
	position: relative;
	color: white;
	top: 18vh;
	left: 4vh;
}

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


div.track {
	position: relative;
	padding: 0;
	width: 80.67727vw;
	background-color: black;
	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.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: black;
}

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


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;
}
div.image {
	background-color: orange;
}


div.object-arrow-right {
	border-top: 2vh solid transparent;
	border-left: 4vh solid yellow;
	border-bottom: 2vh solid transparent;
}
div.object-arrow-up {
	border-left: 2vh solid transparent;
	border-right: 2vh solid transparent;
	border-bottom: 4vh solid yellow;
}

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.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;
}


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

div#arrow-fade-container {
	position: relative;
	height: 42.5vh;
	width: 28vh;
	top: -20vh;
	left: -14vh;
	background-color: rgba(255,255,255,0);
	clip-path: inset(16.2vh 1.35vh 6.2vh 12.7vh);
	overflow: hidden;
	z-index: 2;
}


div#magnified-arrow-fade-container {
	position: relative;
	height: 35vh;
	width: 35vh;
	top: -2.475vh;
	background-color: rgba(255,255,255,0);
	overflow: hidden;
}

div#clip-arrows-container {
	clip-path: inset(16.25vh 29.25vh 3.75vh 12.7vh);
	overflow: hidden;
}

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

div#logo-container {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: 0;
	border: 0;
	padding: 0;
}
img#logo {
	height: 12vh;
	width: auto;
}