#frame {
	min-width: 700px;
	min-height: 400px;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
#screen {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#fwdlcanvas {
	opacity: 0.7;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 20;
}
#tracecanvas {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 2;
}
#canvascontainer {
	position: relative;
	width: 2000px;
	height: 2000px;
	margin: auto;
	-webkit-box-shadow: 0px 0px 24px 12px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 24px 12px rgba(0, 0, 0, .5);
}
#lightcanvas {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 10;
}
.lightBox {
	position: absolute;
	z-index: 10;
}
/* bouncing animation */
.bouncing {
	-webkit-animation: bounce 500;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce{
0% {
-webkit-transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(.98, .98, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}

/* fading animation */
.fading {
	-webkit-animation: fading 500;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes fading{
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

/* ending animation */
.endingOne {
	-webkit-animation: endingOne 2500;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes endingOne{
0% {
opacity: 0;
}
10% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
}
.endingTwo {
	-webkit-animation: endingTwo 500;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes endingTwo{
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.endingThree {
	-webkit-animation: endingThree 1250;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes endingTwo{
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}

/* starting animation */
.starting {
	-webkit-animation: starting 2500;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-iteration-count: 4;
}
@-webkit-keyframes starting{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

/* starting animation */
.zoomOut {
	-webkit-animation: zoomEnd 20000;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes zoomEnd{
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.25);
}
}
/*component menu*/
#componentMenu {
	position: fixed;
	left: 0px;
	bottom: 0px;
	border-top-right-radius: 10px;
	-webkit-box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
	-moz-box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
	box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
	height: 28px;
	width: auto;
	z-index: 40;
}
.component {
	float: left;
	height: 28px;
	width: 28px;
}
.component:hover {
	height: 30px;
	-webkit-box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
	-moz-box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
	box-shadow: 0px 0px 6px 2px rgba(120, 120, 120, .5);
}
.component:active {
	background: white;
}
.componentPic {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3px;
}