@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.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -o-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
}

body {
    /* width: 400px; */
	height: 295px;
	text-align: center;
}

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

.diagramTextBlack {
    position: relative;
}

.mainWindow {
	position: relative;
    display: inline-block;
    width: 280px;
	height: 135px;
	padding-top: 10px;
    /* background: none; */
    /* border: none; */
    /* margin-top: 15px; */
}

#prismContainer {
    left: 63px;
    width: 162px; height: 109px;
}

#prismImg {
    position: absolute;
    left: 20px; top: 0px;
    width: 109px; height: 114px;
}

#rayCan {
    position: absolute;
    left: 0px; top: 0px;
    width: 162px; height: 126px;
}

#topPrismCan {
    position: absolute;
    left: 20px; top: 0px;
    width: 109px; height: 114px;
    opacity: 0.5;
}

#lblContainer {
    left: -157px;
}

#opticContainer {
    position: relative;
    left: -13px; top: -15px;
}

#opticImg {
    position: relative;
    width: 35px; height: 11px;
}

#waveLbl {
    left: -10px;
}

#eLbl {
    left: 170px; top: -35px;
}

#oLbl {
    left: 105px; top: 30px;
}

.controlPanelBack {
	position: relative;
    display: inline-block;
	margin: 4px;
	padding: 4px;
	vertical-align: middle;
}

#speedSldr {
    display: inline-block;
    position: relative;
    width: 120px;
}

#speedSldrLbl {
    width: 145px;
}

#prismCB {
    display: inline-block;
    position: relative;
    /* width: 145px; height: 33px; */
}

.controlText {
	margin-bottom: 4px;
}