@charset "utf-8";

/** This shrinks the loading screen for smaller tutorials.
May need to play around with the value per each tutorial **/
.splashBackground {
	-moz-transform: scale(0.95, 0.95);
	-ms-transform: scale(0.95, 0.95);
	-o-transform: scale(0.95, 0.95);
	-webkit-transform: scale(0.95, 0.95);
	transform: scale(0.95, 0.95);
}

body {
	/* width: 415px; */
	height: 528px;
	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: 320px;
	height: 320px;
}

#backgdImg {
	width: 307px; height: 313px;
}

#reflectContainer {
	left: -2px; top: -150px;
	width: 267px; height: 134px;
	overflow: hidden;
}

#reflectContainer > *{
	position: absolute;
	left: -18px; top: 26px;
	width: 307px; height: 109px;
}

#waveContainer {
	top: 23px;
	overflow: hidden;
}

#rWaveContainer {
	position: absolute;
	left: 145px; top: 2px;
	width: 140px; height: 109px;
	overflow: hidden;
}

#rWaveCan {
	position: absolute;
	left: -15px; top: -9px;
	width: 307px; height: 109px;
	border: solid 1px transparent;
}

#lWaveContainer {
	position: absolute;
	left: 0px; top: 2px;
	width: 150px; height: 109px;
	overflow: hidden;
}

#waveCan {
	position: absolute;
	left: 0px; top: 0px;
	border: solid 1px transparent;
}

#wavesFadeCan {
	position: absolute;
	left: 0px; top: 0px;
}

#angleCan {
	position: absolute;
	left: 150px; top: 1px;
	width: 155px; height: 109px;
}

#fluorCan {
	left: 66px; top: -6px;
	width: 150px; height: 29px;
}

#lblsContainer {
	width: 307px; height: 115px;
}

#lblsContainer div:nth-child(1) {
	left: -28px; top: -16px;
}

#lblsContainer div:nth-child(2) {
	left: -46px; top: -2px;
}

#lblsContainer div:nth-child(3) {
	left: 78px; top: 72px;
}

#lblsContainer div:nth-child(4) {
	left: -45px; top: 92px;
}

#whiteTxt {
	position: absolute;
	left: 100px; top: 135px;
}

#whiteTxt div:nth-child(1) {
	position: relative;
	left: 70px;
}

#whiteTxt div:nth-child(2) {
	position: relative;
	top: 40px;
}

.controlPanelBack {
	display: inline-block;
	margin: 8px 4px;
	padding: 4px;
	vertical-align: middle;
	height: 40px;
	width: 180px;
}

#angleSldr,
#indexSldr,
#waveSldr {
	display: inline-block;
	position: relative;
	width: 140px;
}

.bottomBack {
	margin-top: 0;
}

#formulaBack {
	/* height: 70px; */
}

#staticForm {
	top: 5px;
}

#dynamForm {
	top: 5px;
	margin: 0 15px;
}