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


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


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


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



svg {
	display: inline !important;
	height: 80vh;
	width: 100vw;
}

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

path#block {
	visibility: visible;
	display: inline;
}
path#convex {
	visibility: visible;
	display: none;
}
path#concave {
	visibility: visible;
	display: none;
}

path#blockMirror {
	visibility: visible;
	display: none;
}

path#convexMirror {
	visibility: visible;
	display: none;
}

path#concaveMirror {
	visibility: visible;
	display: none;
}
/* *********************************************************************** */

polyline.lines {
	fill: none;
	stroke: red;
	stroke-width: 7px;
	visibility: visible;
}
polyline#centre-line {
	display: inline;
}
polyline#upper-centre-line {
	display: none;
}
polyline#lower-centre-line {
	display: none;
}
polyline#uppermost-line {
	display: none;
}
polyline#lowest-line {
	display: none;
}

polygon#centre-line-arrow {
	display: inline;
	fill: red;
}
polygon#upper-centre-line-arrow {
	display: none;
	fill: red;
}
polygon#lower-centre-line-arrow {
	display: none;
	fill: red;
}
polygon#uppermost-line-arrow {
	display: none;
	fill: red;
}
polygon#lowest-line-arrow {
	display: none;
	fill: red;
}
/* *********************************************************************** */



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-a-instructions-container, span#part-b-instructions-container, span#part-c-instructions-container {
	display: inline-block;
	margin-top: 0.5vh;
}

span#part-c-instructions, span#part-b-instructions-flat, span#part-b-instructions-curved, span#part-a-instructions-block, span#part-a-instructions-lenses {
	position: relative;
	display: none;
	font-size: 120%;
	font-weight: bold;
	color: yellow;
	margin-top: 0.5vh;
	margin-left: 2vw;
	margin-right: 2vw;
}
span#part-a-instructions-block {
	display: inline;
}

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


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


div#choose-beam-number-container {
	display: none;
	position: relative;
	left: 40vw;
	width: 40vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
}

div#slider-container {
	display: inline;
	position: relative;
	left: 30vw;
	top: -1vh;
}
div#angle-label-container {
	display: inline;
	position: relative;
	left: 40.5vw;
	top: -1vh;
}

span#angle-label, span#lens-or-mirror-text, span#angle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	color: yellow;
	padding-bottom: 1vh;
}
/* *********************************************************************** */

div#surface-highlights-container {
	display: inline;
	position: relative;
	left: 40vw;
	top: 0vh;
}
line#first-surface-highlight-id {
	stroke:rgb(255,255,0);
	stroke-width: 4px;
	display: none;
}
line#second-surface-highlight-id {
	stroke:rgb(255,255,0);
	stroke-width: 4px;
	display: none;
}
text#first-surface-text-id {
	display: none;
	font-size: 3vh;
	font-family: Arial, Helvetica, sans-serif;
}
text#second-surface-text-id {
	display: none;
	font-size: 3vh;
	font-family: Arial, Helvetica, sans-serif;
}
polygon#first-surface-arrow-id {
	fill: yellow;
	display: none;
}
polygon#second-surface-arrow-id {
	fill: yellow;
	display: none;
}
/* *********************************************************************** */

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

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

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

input[type="range"]#slider-id {
	width: 40vw;
}



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



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

}


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

div#track-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 50vh;
	left: 10vw;
	display: none;
}
div#bulb-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 8vw;
	display: none;
}
div#object-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 13vw;
	display: none;
}
div#lens-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 30vw;
	display: none;
}
div#lens-screen-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 40vw;
	display: none;
}
div#mirror-container {
	position: absolute;
	border: 0;
	margin: 0;
	padding: 0;
	top: 22vh;
	left: 50vw;
	display: none;
}


div#image-container {
	position: relative;
	border: 0;
	margin: 0;
	height: 20vh;
	width: 12vh;
	//overflow: hidden;
	top: -13.25vh;
	left: 0vh;
	padding: 0;
	display: none;
	-webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
	filter: blur(0px);
}
div#magnified-view-container {
	position: absolute;
	overflow: hidden;
	display: none;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-width: 0.5vh;
	height: 35vh;
	width: 35vh;
	top: 60vh;
	left: 70vw;
}

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

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


div#object-target, div#mirror-container-target, div#lens-container-target, div#lens-screen-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: white;
	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#lens {
	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#mirror {
	position: absolute;
	height: 20vh;
	width: 5vh;
	top: -1.5vh;
	left: 2vh;
	border-radius: 50%;
	border-right-style: solid;
	border-width: 1.5vh;
	border-color: lightgray;
}



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



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#lens-post, div#mirror-post, div#object-post {
	position: relative;
}


div.distances {
	position: absolute;
	color: white;
	//top: 18vh;
	top: 32vh;
	left: 4vh;
}

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


div.track {
	position: relative;
	padding: 0;
	width: 80vw;
	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#screen-line-attachment-div, div#object-line-attachment-div, div#lens-line-attachment-div, div#mirror-line-attachment-div {
	position: relative;
	top: 5vh;
	left: 5vh;
}


div.text-arrow {
	position: absolute;
	color: red;
	font-size: 1vh;
	top: 0vh;
	left: 0vh;
}
div.io-distance-line {
	position: absolute;
	background-color: red;
	top: 45vh;
	height: 0.4vh;
}
div#object-distance-text {
	position: absolute;
	top: 0vh;
	left: 25%;
	z-index: 5;
}
div#image-distance-text {
	position: absolute;
	top: -2vh;
	left: 25%;
	z-index: 5;
}

div#image-distance-line, div#object-distance-line {

}


div#image-distance-left-arrow, div#object-distance-left-arrow {
	position: absolute;
	font-size: 5vh;
	font-weight: bold;
	width: auto;
	top: -2.5vh;
	left: 0;
}
div#image-distance-right-arrow, div#object-distance-right-arrow {
	position: relative;
	font-weight: bold;
	font-size: 5vh;
	width: auto;
	top: -2.5vh;
	float: right;
}

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

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