@charset "utf-8";

body {
	/* width: 430px; */
	height: 475px;
	text-align: center;
}

.mainWindow > *{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.diagramTextBlack {
	display: inline-block;
	position: relative;
}

.mainWindow {
	position: relative;
	display: inline-block;
	width: 380px;
	height: 250px;
	padding-top: 20px;
}

#medContainer {
	width: 340px; height: 231px;
}

#medCan,
#waveCan {
	position: absolute;
	left: 0px; top: 0px;
	width: 340px; height: 231px;
}

#lblContainer {
	position: absolute;
	left: 0px; top: 0px;
	width: 340px; height: 231px;
	overflow: hidden;
}

#critAngLbl {
	left: -61px; top: 169px;
}

#incAngLbl {
	left: -145px; top: 200px;
}

#keyContainer {
	position: relative;
	left: 3px; top: -15px;
	width: 52px; height: 100px;
}

.horizLine {
	position: relative;
	display: inline-block;
	left: 1px;
	width: 52px; height: 1px;
}

#aboveLine {
	background-color: black;
}

#belowLine {
	background-color: red;
}

.depthLbl {
	font: 10px/1 Arial;
}

#dLbl {
	position: absolute;
	left: 175px; top: 114px;
}

#penetrationLbl {
	left: 175px; top: -80px;
}

#incRayLbl {
	left: -148px; top: 98px;
}

#waveLbl {
	left: -106px; top: 98px;
}

#reflectLbl {
	position: absolute;
	left: 120px; top: 40px;
}

#iLbl {
	left: 95px; top: -90px;
}

#indexLbls {
	left: 72px; top: -17px;
}

.controlPanelBack {
	display: inline-block;
	margin: 4px;
	padding: 4px;
	vertical-align: middle;
	width: 135px;
	height: 46px;
}

.controlText {
	margin: 4px auto;
}

.sliderHandleBorder canvas:nth-child(3) {
	height: 28px !important;
}

#angSldr,
#waveSldr {
	display: inline-block;
	position: relative;
	width: 120px;
}

#indexCB1,
#indexCB2 {
	display: inline-block;
	position: relative;
	width: 120px;
	/* height: 30px; */
}